Day 1
Day 2
Closing Keynote #
by Henri Helvetica
Launching Craft in Critical, High-Traffic Situations #
by Sue Malomo from Happy Cog
Talk abstract:
Many of our sites are very highly trafficked and/or have significant traffic spikes, and have a lot of complex functionality that isn’t always very easy to just throw a page cache on top of. We’ll take a look at how to optimize Craft in these scenarios and keep the site super fast, and how to live-debug issues if there are problems post-launch.
- Back-end developer at Happy Cog
- Reviewing a recent project to show how they made improvements on performance after a rough launch:
- Craft CMS
- Nuxt
- Stripe
- RevenueCat
- SparkPost
- MailChimp
- Terraform for infra
- used custom API module and Element API, consumed by Nuxt front-end and native iOS and Android apps
- Site launched and BOOM things went south quickly
- They got to work optimizing the site
- optimizing queries
- added server-side caching via Redis
- Craft caching for logged-in users
- where they couldn’t optimize they lazy-loaded data to help mitigate the size of the initial payload
- measurable and notable results from the optimizations
Getting Started with Manual Accessibility Testing #
By Lupe Camacho
Talk abstract:
Automated testing tools are great for finding and squashing critical accessibility issues. But did you know that they can only catch about 30% of the total accessibility issues on a site? In this talk, we’ll focus on how you can use manual accessibility testing to improve the UX of your sites and plugins. First, we’ll discuss how to plan the scope of a manual audit. We’ll cover how to use accessibility personas to guide your testing, and search Craft CMS control panel for common issues. Finally, you’ll learn about a powerful browser tool for speeding up your manual testing.
- Lupe is the accessibility engineer at Pixel & Tonic
- Self-taught developer, learned online (hooray!)
- IAAP-certified as web accessibility specialist
- What is difference between automated accessibility testing and manual testing?
- Lighthouse is a tool that allows automated testing
- Manual testing means using a tool like a keyboard to test what it is like for someone only using a keyboard; or use a screen reader to test the site from the POV of a blind or visually impaired user.
How do you decide what to manually test?
- Not every page on your website!
- Triage your manual tests
- Global site content (header, footer) — spend time here because of the impact on site pages
- Commonly-used components
- Essential site functions
- For an e‑commerce site: prioritize adding to cart, editing cart, contact merchant, get to important policy information
- As an examples, Lupe’s work on Craft is prioritizing the author experience (create entry, edit entry, manage assets) since those are essential functions of the Craft application.
- Find representative samples of content to test
Accessibility Personas
- You build personas based on how the person will interact with your website
- I am a sighted user, using a mouse, etc.
- From the perspective of a keyboard-only user
- affects users with motor disabilities, little or no use of hands, limb loss or injury, blindness
- Chrome extension: Accessibility Insights
- Common Issues with accessibility
- Focus Loss
- fixed this issue in a recent update to Craft
- every browser has default focus styles to show where the user is on the page
- if you change the focus styles, you should change the colors to meet minimum contrast guidelines
- Mouse-only interactions
- Make sure interactive items can be accessed/toggles on with just a keyboard
- Use sematic HTML elements
- it’s difficult to create a from-scratch element and have it be fully accessible
- aria-label, role, onclick, onkeydown, tabindex
- Questions to ask yourself when testing for a keyboard-only persona
- Are focus outlines visitble enough?
- Is keyboard focus managed in an intuitive way?
- Can you activate all interactive elements sans mouse?
- Can you skip sections (like nav)
- Screen reader user persona
- low or no vision
- uses keyboard, screenreader software on their device (e.g. VoiceOver on macOS and iOS)
- video: How A Screen Reader User Accesses The Web: A Smashing Video — Smashing Magazine
- all visual context is lost when using a screen reader
- how do we specify visual indicators (like nav) for screen readers?
- add aria roles to the elements
- is this a user interface control?
- aria roles can cause problems when used improperly
- “the first rule of aria, don’t use aria” <= if you don’t know how it impacts your site on screenreaders
- Is there enough context for a screenreader user?
- Lupe has been showing some really good videos of screenreader using the Craft CP. I’ll try to get links to them to put here.
- Questions to ask yourself when testing a screenreader persona
- Am I using sematic HTML?
- Are page titles, headings, and images descriptions helpful?
- Do item have enough context when viewed in isolation?
- Are state and role communicated for interactive elements?
- Are errors, status messages, and other alerts communciated in a non-visual way?
- Lupe is now doing a live demo of her testing tools
- Accessibility Insights for Web
- axe DevTools | Developer Tools for Accessibility Testing
The Seven Deadly Sins of Author Experience #
by Henrik Hentschel
- joining the conference from Switzerland
- the experience of authors and editors when they want to change and add content in a CMS
- Purpose of a CMS?
- a tool to manage the lifecycle of communication content
- He wants to show how we can make the creation process easier or wose
- Zeix AG — small digital agency for user-centered design
- 27 specialists in 17 disciplines
- Swiss market leader
- Why author experience?
- Good UX of a website edpends on a quality of the content
- in order to create good content, use cases of authors and editors must be considered, along with the backend
- the less frustrated authors are, the more often and commited they will be using the CMS and keeping the content up-to-date
- “without a good author experience there is no good user experience”
- Who are the authors?
- 4 groups
- content responsible (owners) — content know-how, editorial
- occassional — publish sometimes but need help with the CMS
- suppliers — external people, freelancers other agencies who supply illos, photos, videos
- web authors — editors or authors who pull the strings, they create the content int he CMS and very good at it
Seven Deadly Sins
- worse than the standard sins
- Involvement — arrogance — talk to end users as early as possible in the development process and involve them
- Explanation — laziness — if the CMS provides too many templates that aren’t clearly descirbed, the authors will only use the ones they know.
- name templates so it is cleared what they are for
reference-page
vs standard-template
- information text with UI elements
- Level Entry Type plugin
- Notes plugin
- also use entry notes fields (native)
- Text/Image — Gluttony — a problem here is that web writers could have to deal with too many things that has nothing to do with quality of content.
- image management — make sure the CMS handles the hard work of images.
- ImageOptimize plugin
- Image Reize plugin
- editorial process
- enable a release or approval process
- use Preview link to send to content owner
- Workflow plugin is helpful to set up editorial process
- Restriction — voluptuousness
- using images that don’t match the content :(
- for a better AX, don’t restrict the authors too much
- correct rights assignment is helpful
- use the CMS to help restrict what the authors can publish
- images are content and must match text content
- iconic images should be avoided because they confuse the users rather than help
- give authors an option of choosing alt content, like a colored area if they don’t have a suitable image
- Linking — envy
- when writing for the internet, we leave the limitation of printed text
- not all users are aware how important it is to link pages for sharing additional on-site information and for SEO
- Suggestions
- CMS backend should help with linking
- automatic basic linking
- helpful plugins
- Orientation — anger
- anecdote about a missing front-end “Edit” button; author didn’t know you had to be logged-in to see the button on the front-end
- help authors orient themselves and reduce confusion
- Suggestions
- Maintenance — Avarice
- always neglected in terms of resources for maintenance
- why? because it didn’t matter in the print days. Once printed, the works was complete and no one touched it again
- websites need care and updates
- create a traffic light system for content to be maintained
- management of assets (images, documents)
- Asset Usage plugin — adds columns “Usage” and “Current Usage”
State of Craft Commerce #
by Luke Holder
- Luke isn’t the only developer Commerce
- Luke, Nathaniel, and Dale are the main developers on Commerce
- The team is impressed with the great commerce sites the community builds on top of Craft Commerce
- Craft Commerce plugins
- reporting plugins
- product sync plugins
- marketing tool integrations
- payment gateways
- utilities to make Craft Commerce better
- Commerce is a plugin!
- they have the same challenge as other plugins to stay on top of changes in Craft
- Commerce will be on the same yearly major release cycle as Craft
- Commerce 4 will be out around the same time as Craft 4
- Current version is 3.4.x
- it’s good to see that they’ll be moving together in terms of releases and versions
- no confusion about which version Commerce works with which version of Craft
Recents updates
- 40 version releases over the last year
- try to keep COmmerce as stable as possible — core part of customer businesses
- features
- 3.3.- partial payments
- customer notifications when price of product changes. If customer has cart and price has changed or product unavailable
- 3.4 — merge PDF exports, more control over sales, slide-out editor UI suppor
- 3.4 will be the last major commerce release of Commerce
- Yesterday in latest 3.4 release they released an update to the examples templates
- look nicer, slicker, cleaer. Code was cleaned up to make it easier to copy and paste.
- JS is dependency free! yay!
- these templates are located inside the commerce directory in the
vendor
directory of your project. You have to copy them in. - use a command to generate templates
craft commerce/example-templates
New Features for Craft Commerce 4
- Money Field (currency field)
- important for commerce; Commerce doesn’t have a money field right now because we expect the same currency
- will be in Craft core
- you can use this field in your content model
- allows validation of the amount so it matches the localization of that currency
- adding
money/money
Composer package to Commerce 4- provides value or money object
- they can replace floats for storing currency values with the new money object
- will help with bugs that occur with rounding on discounts etc
- will also help with currency conversion
- Address Field
- will be added to Craft, too, and available for content modeling
- will use standard internationalized address inputs
- based on Google address data
- provides validation of address and formatting (very cool!)
- Customers === Users
- all customers will be users in Craft Commerce 4
- allows for marketing based on email addresses
- same user can be re-attached to the order
- has good CRM implications
- User Address Book moved to Craft Core
- makes it available to all plugin developers and implementations
- Discount Condition Builder
- “if customer have 5 things in their cart, they get this discount”
- 3.2 had a condition formula added
- Condition builder now sits in Discounts
- This will help simplify how conditional discounts are created (less fragile code)
- conditional builder in element index is AND based right now but they will improve it to have ALL based conditions, too
- Shipping Rule Condition Builder will be added, too
- Detailed Permissions
- Improved permissions for discounts, sales, and subscriptions
- more fine-grained permissions for commerce system
- will retain some customer permissions but because customers are moving into users, some of those permissions will be removed
- Not everything in Commerce 4 but…
- Allowing additional Tax ID validators
- current VAT support but they want to support additional validators
- Commerce debug panel
- similar to Craft debug panel but docused on Commerce
- see information about current cart without having to
dd
etc
- Multiple coupons per discounts
- New ways to add line items to the cart
- don’t necessarily need a purchasble ID
Craft Commerce Roadmap
- Q1 beta release for Commerce 4
- Q2 stable releases for Commerce 4
- Gateways
- Stripe is only gateway they support for subscriptions; very basic
- working on new version of Stripe that allows dynamic prices for subscriptions
- dynamic line items-related
- sync payment sources
- sync customers
- sync other data
- Mollie support wil be improved
- Multi-store and mulit-currency
- complex feature that touches every part of the COmmerce system
- laying the groundwork to support both of these via the features already announced
- this is the next item after Commerce 4, planned for Commerce 5 — see roadmap
Day Two Schedule #
Today is the second and last day of the conference. The schedule today has 5 talks planned. It kicks off with the State of Craft Commerce by Luke Holder.
Day One Wrap #
That’s a wrap for day one! Thank you for reading.
I’ve been cleaning up and editing the notes so they’re easier to read and follow.
-Ryan
Post-Conference Discussion with Craft Team #
Andrea DeMers and Ben Croker will host a discussion with the Craft CMS team on Twitter Spaces. Join in and listen.
Use Entry Types for the Love of… Clients #
by Stephen Callender
Abstract:
Entry Types are the under-appreciated heroes of Craft CMS. With properly used entry types you can create a content model that allows your clients the freedom they expect from a modern CMS. In this session, Stephen will show you how they use Entry Types in our builds at Foster Commerce for both Twig and Nuxt headless projects. For a little spice, we’ll explore the edge cases and some arguments against using them. By the end, you’ll be singing the praises of Entry Types and we’ll start a fan club.
- Channel and Structure section types have multiple entry types
- Entry Types are the heroes, powerhouse, unsung heros of Craft CMS
- Entries | Craft CMS Documentation | 3.x
- Stephen says Singles section type overuse is a problem
- CMS Bare Minimum Assumptions
- It should allow nesting of pages
- it should allow creating of pages from reusable templates
- When is a Single section a good idea?
- it’s the homepage
- it’s a utility page that exists whether there’s an entry in Craft or not
- Cool things to use with Entry Types
- create a “redirect” entry type
Building with Bumpers #
by Shawna O’Neal
- creating a guided CMS experience for content authors
- What is bumper?
- referring to a bumper at a bowling alley or on a car
- guide the user towards their goals
- and prevent them from catastrophic damage if they do something wrong or unexpected
- Why build with bumpers?
- helps identify intended usage
- preserves the design — keep content choices (Hello, WYSIWYG!) from breaking the design
- streamlines content updates — it’s easier for them to quickly update content when the changes are needed. Get in, make updates, get out.
- optimizes performance
- creates expectable outcomes!
- It shouldn’t be a mystery what happens when they fill out a field or change data/content
- There is more than one way to build a website
- well-deserved shade thrown to tech twitter :)
- Set expectations well-ahead of the project development
- CMS is the glue that hold dev, design, UX, and perf together
- Clear component definitions — how will the components be used, where can they be used, what are the limits?
- Client Expectations — set these explicitly
- have discussion with client so they know exactly how much content editing and flexibility they’ll have.
- Set field limits
- If a design only supports 4 images, set the limit in the Craft field so you keep creating expectable outcomes
- Don’t overdo it
- Matrix blocks can be a performance hit
- Paradox of Choice — the more options you provide a human, the more likely they are likely to become overwhelmed. The Paradox of Choice — The Decision Lab
- provide fewer, flexible options
- Scaling Components
- “Never, ever expect that a client won’t push fields beyond reasonable expectations. Plan for it.”
- Plan for what the client’s needs are right now vs where they’re going tomorrow
- Fail with error templates — “do it with style” :)
Happy Team, Happy Clients — a 10,000 ft View of a 1,000 Hour Project #
by Kyle Cotter and Kate Lechleiter of Happy Cog
- How can we have a happy team and keep our clients happy?
- Plan
- Communicate
- Trust
- Adapt
- Refine
- Using a 1,000 agency project as a frame for this talk
Traditional Agency Workflow
- Waterfall approach (Waterfall model — Wikipedia)
- each phase needs to be completed before moving on to next phase
- siloed, lack of communication
- QA is typically at end when timelines are tight and budgets low
- Professionally Organized Departments (PODs)
- group of people working together, different disciplines
- They’ve used the POD process on these types of projects:
- news outlets
- non-profits
- Sales/marketig
- e‑commerce
- basically all types of projects?
1000 hour project example
The Design Process in a POD setup
- Collaboration is what makes the traditionally waterfall process more collbaroative.
- no traditional hand-off from design to development since everyone is involved throughout the project.
- Content Modeling
- design team works in Craft to make sure the assumptions the developers make are correct
- since the design team owns the IA and sitemap
- Development
- Twig development
- devops is done upfront, so there’s no waiting near launch
- Connecting the Dots
- final QA and addressing issues that would prevent launch
- The Launch Process
- because of everything they’ve done in the process, then launch process is smooth and uneventful.
Craft, Web Vitals and You #
by Jemima Abu, self-taught front-end developer from Lagos, Nigeria
- Understanding Web Vitals
- “Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.” Web Vitals
- Core Web Vitals — performance metrics for determining user experience
- Loading
- LCP — Large Contentful Paint — how long it takes the largest image or text block to render
- FID — First input delay — less than 100ms is good
- measures how long it takes a website to repsonse to a user’s first interaction
- CLS — measures how much the page moves around (causing usability issues)
- Interactivity
- Visual Stability
- Testing Web Vitals
- Tools you can use to test your web vitals
- Craft and Web Vitals
- Is there a relation between using a CMS and web vitals?
- Testing Craft Sites
- Improving Web Vitals
- Reduce loading animation (decreases CLS score?)
- animation time is added to rendering time
- Set element dimensions
- set fixed dimensions on an element prevents CLS when the image loads
- Use caching
- Defer scripts
State of Craft #
The first talk of the day is Brandon Kelly’s State of Craft. He’s done this talk at every Dot All.
- Attendees from at leas 25 countries.
Brandon is touting the breadth sites using Craft right now.
- ProPublica
- TheNextWeb
- Barefoot Contessa
- Tito’s Vodka
Craft team is incredibly proud of the work the community is doing. 🎉
Craft Team Info
- Craft sales are continuing to grow and the team has also grown.
- 16 people on the team now
Craft Plugin Store Stats
- launched about 3.5 years ago
- only 200 plugins at the time of launch
- now at 898 plugins
Craft ID ➡ Craft Console
- Logging into Craft ID has gotten awkward.
- They are working on an update.
- New version of Craft ID will be called Craft Console
- Will get a minor facelift
- They are adding a new thing: Organization Accounts
- can be owned by one or more Craft IDs
- accounts are free
- can have additional members with more focused permissions
- holds your Craft CMS and plugin licenses (like current accounts can)
- Organization Accounts are now required to publish a plugin.
- Partner Network profiles will also require an organization account
- They will automatically migrate existing accounts
- LAUNCH: next year
Craft Cloud Update
- Announced in Montréal in 2019
- Concept was headless Craft as a service
- It was very limited (no templates, plugins) because of technical limitations
- They were excited about the idea but….the community reaction wasn’t really positive.
- They decided not to launch Craft Cloud as originally planned.
Forgot everything they ever said about Craft Cloud because:
- Craft Cloud is a PaaS for all Craft CMS projects
- for launch it’ll be closer to a “automated workflow PaaS” type of thing
- basically this is a managed hosted version of Craft CMS
- The new demo sites are hosted on Craft Cloud. It’s been a test for them of the new platform.
- Craft CMS website will re-launch on Craft Cloud
- No date for launch except “Next year”
Craft CMS Updates:
- 3.4, 3.5, 3.6, 3.7 have launched since the last Dot All conference.
- it hasn’t been a smooth road and they’ve had some bumpiness with the releases
- Brandon shared the frustration with plugins breaking and wants to make sure releases aren’t breaking.
- How do they remedy this?
- As of Craft 4 they are introducing a new release cycle
- one major new release per year
- 2022: Craft 4, Commerce 4
- 2023: Craft 5, Commerce 5
- etc
When is Craft 4 coming?
- Beta planned for Q1 2022, stable release planned for Q2 2022
- Craft 3.7 will be the last minor release of Craft 3
- Craft 4 requires 7.4 — enables Craft to be fullly typed
- 7.4 typing should help with project config changes
Craft 4 features and updates:
- Collections
.collect()
runs the query and returns them as a Laravel Collection
- Eager loaded elements are returned as collections. It allows us to loop over collections like an array.
- Existing templates will work
- But you can also switch over to
.collect()
- Collections have their own
collect()
method - Multi-factor Authentication
- want to implement it in a generic way that works for everyone
- Authentication chains — a list of steps, some optional, some not
- Inactive user accounts
- Let’s admins create accounts that can be assigned to content but not be active.
- Aimed at agencies who are creating accounts for clients
- Element Index filtering
- filter results in element index pages in a live search/filter setup
- Custom sources
- Give your own custom source its own label and what kind of elements should show up for that source
- source settings are now stored in the project config
- More coming
- they want to do nested matrix fields
- and conditional fields
Craft 4 beta in Q1 and Stable release in Q2 2022
Notes and Thoughts from Dot All 2021 #
I’ll keep this space updated with thoughts and notes on the presentations from Dot All 2021.
The content on this page will automatically update every 30 seconds. New posts at the top!