Getting Xtra: The Joys and Suffering of XML
Is JavaScript ontologically evil?
I’ve been spending a lot of time in GitHub Pages lately.
More specifically, I’ve been spending a lot of time figuring out how best to leverage GitHub Pages, an incredible tool for hosting static sites (should you provide all the code). If you’re a dev or have any tangential interest in web stuff, I strongly recommend you look into it: GitHub itself is a great if not lifesaving tool all creatives can benefit from knowing (Hi again, John), but Pages extends repos into functioning sites. As a tangent: the growing practice of microsites and websites-as-art-objects is a perfect use case for something like Pages, where you can throw an index.html, style.css, and script.js into a repo and watch it turn into whatever your heart cooked up.
This isn’t a sponsored post, I swear (if GitHub did, however, want to sponsor a post, they would be more than welcome to).
Anyways! This past week is one I’ve spent digging through how to leverage Page’s barebones approach towards creating editable pages for folks who’d rather not get their hands dirty with HTML or .js. More specifically, I’ve been looking for ways to give folks the tools to write their own video game presskits without much code intervention, taking a ton of inspo from the brilliant presskit() project. Which leads me to today’s topic: XML.
Web Xcellence
To preface: XML is sick. For non-dev folks, XML is like if HTML were in sandbox mode: none of your <tags> really hold any special value except for what you assign them in the sites (or apps, if you’re annoying) they live in. You can do things like nest little bits of information inside one another in a way that makes sense specifically to you, then leverage Javascript to populate your website with the info you’ve entered. For instance, if you want a convenient place to put a list of your favorite foods on your site, you can make a new document called aboutMe.xml and enter:
Neat, right?
And, for the sake of argument, lets say you have a little blank web page and some boilerplate HTML that looks something like this, were you want to list your favorite foods:
Cute! Simple! Dare I say: fun! But what if you wanted a little bullet point list under your <h1> element, and you wanted to grab some data out of your XML document to populate the list? To do that, you’d use something like this:
Not cute! Not simple! And most certainly: not fun! .js ruins the day yet again!
Actually, though, if you sit with it for a bit, it starts making sense: we find the XML document, make a new XML parser, find the xml tags we’re looking for, find the HTML element (in our case, an unorganized list, or <ul>) we want to put our list into, count the number of <food> items we have and feed it into a for() loop, iterate through every element labelled <food> and get their respective text info, create a new list item, populate that list item with the text inside the <food> item we’ve found, and add that new list element to the existing <ul> in HTML (phew). It… works.
The fun thing about this script: you can keep adding to your list of your favorite food, and it’ll keep populating the list on the HTML side! This is (kinda) a good stepping stone for getting into AJAX (Asynchronous JavaScript and XML), the technique Wordpress uses to update things like comments and tickers in real-time. Be forewarned, AJAX is a hell of a rabbit hole to jump in to, but it’s absolutely worth it if you’re a dev.
What did we learn today, class?
I didn’t expect this week’s blog to be a psuedo-tutorial and intro to XML + parsing, but here at software sprouts by Dayflower Studio, we believe in the beauty of generative, iterative processes (read: me having a general vibe for a post, entering a writer’s trance, and emerging 40 minutes later with an article I barely remember writing, as if possessed by a ghost with a penchant for parentheses).
So! I (personally, as Jay) have all sorts of things cooking on my end, and will likely be writing about them soon as they emerge and enter the public space. Until then, thanks for reading, and see you next week!