Updates to the Petroglyph UI

We’ve made some big updates to the Petroglyph UI - to the point where we might have to call them Breaking Changes, if anyone were looking to update from the source.

From Index.html to Vue.js App

The biggest change to the Petroglyph UI code that you’ll notice if you have been following along is that now, instead of storing our HTML in one index.html page and writing our app in one big index.js file, we now have split everything up into Vue.js components.

As someone who began learning html in 2003, during what seemed like the endless fight for web standards, the adoption of this particular code standard is terrifying - but not because it’s actually scary. It’s because the code appears to be, quite on purpose, what we rallied and fought against for the sake of an open internet and web standards, for all but the last 7-8 years. There used to be internet code that worked only on Internet Explorer, most memorably. This limited corporate browser that followed Windows around, now defunct, was the tool that Microsoft used to effectively slow down the evolution of the free internet, with designs on its own internet standard and have all others follow. But an internet meant for everyone wasn’t going to have that. And we fought and won over many years. The fallacy here is that code like this would be marked and forgotten. But because it was stricken from the HTML standard, this format of code was left to do other things. And after 10-15. years of javascript evolution, I find myself saying "Yes" to code that still freaks me out. Just an example of how browser-specific internet code and now, Vue.js components, look strikingly alike:

<TopNavigation></TopNavigation>

This is the insertion of a vue.js component, and Vue.js will respond accordingly turning it into browser code per the instructions provided to it; it’s not actually pseudo-code. Because it can't be HTML (and because we've registered it appropriately in our code,) Vue.js goes "oh that's mine" and carries it off to become a div with a lot of behaviors. The above tag is not visible on the page source. Sometimes I still have to remind myself.

The Petroglyph UI not only has TopNavigation but all of its page sections broken out into individual component files which house the HTML (template) JS (behavior) and CSS (style) all in one file together. Once learning how this all worked over in Vue School, I was surprised by how much more quickly I could move around the app, change things around, talk between components, add behaviors, and keep things in the right place. Without seeing it go, so much of the cognitive load around testing and getting to finished just vanished.

The Line Length Demo

In the Typography section of the Petroglyph UI, you’ll find a Line Length Demo. It’s meant to demonstrate just how many characters need to be included in a paragraph line in order to be comfortably read. This is specific to both Mobile and Desktop (1068+ characters) and will demonstrate accordingly.

Prior to this update, we had described this in the included text, but it was implemented with the last update, with much thanks to the previously described technique.

Cards to JSON

The image and information cards with topic hash tags have been converted to JSON-driven, so rather than copying and pasting, adding text, you just replace our JSON with yours, line up the fields, and boom! Cards. The size of the cards remains dependent on the exterior containers in the containing template. Vue.js and Craft CMS Developers who need a headless, data-only start for card display will appreciate this.

Simple API calls

The Petroglyph UI now includes cards that demonstrate a GET request - we use the Github API - to grab JSON from a remote source and display it on the page. You’ll see these near the top with the Who We Are panel and down below in the API Integration area (where we will add more of these as it makes sense.) Consider mixing this into your design to grab non-SEO page information, weather, or blog feeds.

Now What?

Be our guest to take a look at the Petroglyph UI and see if it’s the proper jumping off point for your next Web Design or App Design. The Petroglyph UI still uses Tailwind CSS (and has incorporated it into the components in multiple cases.) Go ahead and extend it with very little discovery while making use of pre-fab Vue.js Components (as found in the Tailwind UI and others) We won’t publish work to the Petroglyph UI that we didn’t write ourselves. This is still the place where our expertise is banked, tracked, published, and we use it internally to teach code to our developers. Even if you’re not using it for your own work, it’s a pretty great place to keep up with our work. And we thank you for your interest.