Hi, there. I want to try something and I need your help.
When I was in school for Graphic Design it was pretty common that every week or so we print out our work, pin it up on a board, and then we'd go around the room critiquing each others’ progress. The lesson behind the critique was to learn how to give constructive feedback while getting and interpreting feedback on your work.
What I learned over time was that using a critique format and getting multiple perspectives focused on one thing helped make the thing better. Not in a "too many cooks in the kitchen" sort of way, but more like a "here's something you didn't think of and might want to consider" vibe. At the end of the day it was up to you to decide which feedback to keep or ignore, but the important thing is that it gives you more ways to look at the problem you are solving.
I’ve been working on this web component, called Admin Bar Component, for a little while now and I feel like it’s getting close to feature complete as far as what I wanted to achieve from the get-go. Now I'm thinking about all the things I missed while learning how to work with custom element, Shadow DOM, and all the other web componenty things. I’d like to work toward a 2.0 version that fixes my learning mistakes, optimizes for accessibility and performance, and improves the user experience.
If you have a few minutes, I’d like to ask you for your critique.
A Little History
Admin Bar Component came out of a Craft CMS plugin I’ve been working on for 10+ years. It’s similar to the admin toolbars in Wordpress and Drupal sites where the idea is you are logged into the CMS and on the front-end pages of your site and you see this toolbar on the page that links you back into the CMS or other pages you specify. In recent years I’ve been adding more informational bits that show you things like page view counts, updates, the SEO info on your page. With newer CSS, like anchor positioning, there are now two levels of navigation or the ability to show arbitrary HTML in a popover element.
In order to do those things for the Craft CMS plugin I created Admin Bar Component, which is an open source set of web components that abstract out some of the features of the Craft CMS plugin so you could use it on any type of project. The view counts are generic labels on a <admin-bar-text> element. The secondary menus are popovers that are enabled by a slot on a <admin-bar-button> element. The <admin-bar> element itself has a few built-in features, but it’s mostly a flex container for anything you slot into it.
The design of Admin Bar Component is meant to be pretty generic by default with the option to use classes or CSS variables to override default variables. The rest of Admin Bar Component is all opt-in. The greeting part, logout button, and all the links and text items need to be added as attributes or slotted elements. Between these two things, my goal is that any project can decide how Admin Bar Component looks and what functionality it uses—based on what makes the most sense for the website.
In this 1.x version, an <admin-bar> element with no links and attributes looks like this:
With a bunch of links and text elements added, you can get to something more like this:
To play around with Admin Bar Component and explore all of its current features, check out these CodePens:
Also, I created a product page for Admin Bar Component that is a high-level overview of its features:
Finally, the documentation can be found on GitHub:
Project Goals
Okay, so here’s where I’d like to take things in a 2.0 breaking release:
- Keep
<admin-bar>as a web component that can be used in just about any other framework. While my current plan is to keep the sub-web components, too, I’m open to making changes to them as long as all the flexibility remains. - Keep using Shadow DOM because this seems like a good use case for its style and functional encapsulation.
- Focus on improving accessibility (something I need to learn is how custom elements can talk to each other).
- Improve keyboard-based navigation (especially on popover sub menus).
- Get rid of auto-registering the
<admin-bar>element so the project developer can decide when the custom elements are defined or they could even extend the custom element. - Improve the DX through consistently named attributes or finding improvements based on web component common practices.
- For the time being I plan on keeping Lit around, but a long-term goal of mine is to refactor these components to using standard browser technologies. This is unlikely to be part of the 2.0 release.
As a bonus, I’m really interested in using the Web Components Toolkit but I want to get through all of the above items before diving into it.
The Critique Ask
So with all that in mind, what do you think? What would you do differently? Are there glaring mistakes or is it all just good to go?
I’m learning my way through web components and I don’t yet get to use web standard components in my day job, so my real goal here is to learn from people who have already been knee deep in the web component world—using them on actual production projects.
Admin Bar Component might only ever get used in the Admin Bar Craft CMS plugin, but even still, I want to make it decent and a good web citizen that could work in just about any project.
If you have feedback about the component, please reach out however you feel comfortable. Here are a few places to start: