Jamstack Conf takeaways and Hopin thoughts

Katie - Jun 8 '20 - - Dev Community

I'm not a full-time web developer, but I jumped onto the opportunity to attend Jamstack Conf in my pajamas!

Why I attended

I help manage a full-time musician's web sites. He's the "author" and, to the extent his web editor user interfaces allow, the "designer."

Bandzoogle, a Wix / SquareSpace-style "website builder" cloud service geared toward musicians, has been amazing for building and hosting the web site of one of his bands. It's pretty much put me out of a job for that band's web site, and I love it.

However, it's been a little harder to decide what to do about his web site as an individual, which, from a business perspective, serves as "brochureware" for the full range of live performance, composition, arranging, and producing services he and his bands offer.

Content-wise, it breaks into the following blocks:

  • A homepage including "snippets" of dynamic authored content (photos, videos, music, blog posts) manually being changed out every few weeks or months.
  • A handful of pages that pretty much never change.
  • A catalog of published music (into which "authoring" consists of data entry into input fields on a form)
    • Includes sound samples
    • Includes purchase links
    • Behind the scenes, should include schema.org-formatted representations of each song/album.
  • A list of upcoming & past performances (into which "authoring" consists of data entry into input fields on a form)
    • Behind the scenes, should include schema.org-formatted representations of each song/album.

Bandzoogle/Wix/Squarespace-type web sites haven't quite offered the fine-grained control over importing, exporting, and rendering "data" (music and events) that I'd like to see.

I also want to get the page loading lightning-fast, because it's hard enough as it is to SEO rank someone named Robert Bell against Kool & the Gang or Banana Boat sunblock.

As easy as the Bandzoogle-hosted page is for him to manage, the perfectionist in me wants to see if I can do "even better."

Last time I helped him rebuild the page, we ended up with Wordpress with heavy use of themes and plugins. Cloud site builders hadn't quite become what they are today. Today, the page is feeling a bit dated, and it loads slowly by modern standards. We both agree it's time to migrate to Bandzoogle or to hire a designer and a front-end developer and start fresh. But if we do the latter ... should I reevaluate the CMS and hosting stack instead of sticking with Wordpress?

Could building a static site on the Jamstack give him an adequate authoring experience while letting me feel that his website was architected "perfectly?"

I was skeptical, but luckily, May 2020's Jamstack Conf was no longer across an ocean in London. Instead, it was free and hosted online. So I packed my bags (cup of tea and a bowl of cereal) and headed over to see what I could learn.


Overall feel

This conference was, like a face-to-face one, a destination for fun and energy and meeting people.

Screenshot of Twitter included in mainstage

Things that contributed:

  • Hopin's features
  • Jamstack Conf organizers' mastery of sheparding attendees around the Hopin platform
    • My hands-on training teacher even figured out that we could open a 2nd tab and use manual videoconferencing with other session participants to group into "breakout rooms" and work on projects together
  • 2000-3500 simultaneous attendees
  • Attendees being on their best behavior
    • Nothing inappropriate at vendor booth visits or during chat roulette to my knowledge -- truly the best of the internet!
  • Small "wow factor" details gave attendees things to small-talk about, the way great catered food does at an event in real life.
    • Emcee Phil Hawksworth made his living room lighting match the conference's color branding
    • Ashlynn Polini and other Netlify employees were highly engaged in the chat
    • Photos were incorporated into the mainstage from amazing #Jamstackconf Twitter posts like Ximena Vila Ferral's sketch-notes and an attendee's viewing setup with a monitor stacked on actual jars of jam
    • Everyone loved production studio FNTech's break music.

All it needed was live music! 😉

No wait, actually it had that too for 5 minutes. 😁 I was enjoying Jamstack Conf and Hopin so much that after I visited the imgix vendor booth, during a lull, I asked if they'd mind letting Robert and me test the audiovisual technology I've been helping him set up by giving them a little concert. I wanted to know how it sounded on Hopin. I called Robert and had him join in. Thanks for obliging, imgix -- and for the free product trial credits. Can't wait to try it out.

Screenshot of live music announcement

Hopin's latency was low enough that vendors and visitors to the booth could chat with him in real-time, just like you can walk up and ask the "musician in the corner" some questions between songs at a "meatspace" event. Unlike some videoconferencing apps, Hopin didn't over-optimize the sound for speech, so everyone got a hi-fi experience. I was really pleased with Hopin's A/V tech.

Screenshot from an online performance

(Shortest-notice gig ever? -- Hence the poor lighting, oops. 😆)

I hear that Deserted Island DevOps, hosted in Animal Crossing and Twitch, had legendary high energy, but I missed it.

I certainly enjoyed JamstackConf as much as I heard everyone enjoyed D.I.DO. (Unlike the "conference" session I was so bored in today that I started writing this blog post.)

Attention to participants on the mainstage, combined with "chat roulette" networking opportunities and the ability join into "sessions" & vendor booths' "Brady Bunch" Zoom-room-style video feeds, really made Jamstack Conf feel like a conference, not a webinar series.


Artists like to play with pixels

Perhaps the most valuable thing to come out of Jamstack Conf's "virtual hallway track" was learning that I'm not crazy.

"What you see is what you get" (WYSIWYG) web site builders are important to artists who serve as "authors" for a web site. It turns out I'm not alone in observing that.

Artists really like being able to drag-and-drop the size and positioning of text floating over a header image, and all those nifty things you get with Wordpress's theme editing and with Bandzoogle/Wix/Squarespace-type site builders, without having to ask a front-end developer to do it for them and without having to worry about HTML, CSS, or JavaScript.

I'd suspected this might mean that even the most full-featured CMS for a Jamstack site wouldn't ever truly satisfy that authorial itch. Professional web devs who've partnered with "creatives" wrote "*sigh*" and validated my hunch: Hardcoding the front end might really drive us nuts, considering neither of us are front-end devs.


CMS

One of the best "hallway track" / "happy hour" / "lunch table" / "expo hall" experiences about a conference is the chance to discover products that do exactly what you were hoping someone had already invented a product for.

Attendees and vendors bombarded me with Jamstack-friendly CMS names to explore:

I swear I'd done intensive Google searching in the space, but I hadn't heard of half of these.

That's what's so magical about conferences where you really get to interact with other people, right?


Multi-CMS sites

I learned from fellow attendees that if you like one CMS's WYSIWYG-ish editor for certain types of content (e.g. relatively artistically free homepage editing), but another CMS's WYSIWYG-ish editor for other types of content (e.g. foolproof data entry for highly structured data), site hosts like Netlify can combine the two into one "web site" at the last minute.

(The only catch being that this might make it hard to, say, feature an upcoming event on the home page.)


WYSIWYG means components

I write content for Katie Kodes by uploading plaintext files full of Markdown-formatted text into a Git repository (or into Dev.to for my cross-posts).

Simple Jamstack-oriented content management systems like Netlify CMS or Forestry.io would facilitate data entry for "repeated, structured" content like discographies and event calendars, but they're not even close to the "WYSIWYG" experience of working in Squarespace.

Attending this conference, I learned that if I really want to build the most WYSIWYG-like experience available, it will involve learning enough JavaScript and "web components" or "React" to build modular "chunks" that can be "dragged and dropped" into a grid.

That's a huge lift, but it's nice to know what it entails. I suspect it'd also be insanely useful as a Salesforce developer in the era of Lightning Web Components. I usually stay away from front-end development, but maybe this is the project to take the plunge for. The "bell & whistle" features of CMSes like Stackbit and Magnolia both depend upon a lot more front-end content rendering than I've ever bothered with for Katie Kodes.


Magnolia CMS hands-on training

Although I wasn't able to attend the last hour, doing Magnolia CMS's hands-on training was where I really came to "grok" a lot of concepts.

  • A lot of the "flatter" CMSes like Netlify CMS help authors populate the contents of text files that a static site builder can turn into HTML, with each text file representing approximately one web page (the exception being "data"-style text files that might be repeated within a web page).
  • More "tree-like" CMSes like Magnolia do that, but also help authors sequence such files within other files, so that the "inner" files represent ordered components on a page and the outer files (or folders, perhaps) represent the pages themselves.

Screenshot of Magnolia CMS hands-on training

I don't think I'm doing this justice as I explain it, but it's a little clearer in my head.

Rather than letting a site builder like Jekyll transform a bunch of Markdown-formatted text files generated by a CMS into HTML / DOM elements for us, we wrote actual JavaScript to iterate over a JSON-formatted text file and render content from it.

The fact that the output of the CMS was a bunch of JSON-formatted text with complex nesting (and with the ordering of elements indicating the order in which an author dragged them onto the page using the CMS) instead of a clump of ".md" Markdown-formatted files is notable.

What Magnolia still doesn't do, though, is let an author make a picture "just 2 pixels bigger" on their own. I don't think any of the static site CMSes do. Frontpage, anyone?


Bandzoogle is pretty great

A surprisingly rewarding aspect of IRL conferences is having the opportunity to talk to enough experts to realize that you don't want to work with the product being featured at the conference.

I know more Python, BeautifulSoup, and Selenium web scraping and web browser automation than I did last time I had to help make the "cloud website builder" vs. "DIY" decision.

  • I'm capable of using Selenium to automate data entry of old events into a Bandzoogle page from a CSV spreadsheet.
  • If it were necessary to move off of Bandzoogle, I'm capable of using BeautifulSoup to build my own data export to a CSV spreadsheet.

Bandzoogle is a great site editor for musicians with a fantastic blog and wonderful support. Squarespace and Wix and Weebly have come a long way.

Maybe I'll still bash my head against the wall hacking CMSes to build a Jamstack site, or learning Wordpress Gutenberg well enough to start over with a cleaner WP build. Side projects can be fun.

But perhaps the biggest compliment you can give a tech event is that you learned enough to feel confident saying "no."


Links

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .