The Umbraco Spark Hackathon and Package Jam
The word "hackathon" means different things to different people. For some there is an expectation of being given a shared task, a limited amount of time to complete it in, and even a cash prize for the winners at the end. But in the Umbraco world, a hackathon means an event where anyone with an interest in Umbraco can work on whatever they choose: be that fixing issues on the open-source CMS codebase, contributing to a package (think ‘plugin’) to extend the core CMS functionality, or reviewing others’ pull requests as they come in. But definitely no money at the end: after all, Umbraco is a free open-source project!
Several times a year Umbraco HQ looks to the community to help organise in-person hackathons - usually the day before another event such as the UK and US festivals. These are always free for anyone in the community to attend. The hope is that people will collaborate with and learn from others, thus taking advantage of being in the same physical space. In the past, there have been varying amounts of achievements at these events. Folks have had a good time, made new connections and progressed their chosen tasks, but often have found that a single day is just not enough time to work on something significant. Even with the help of the Umbraco HQ developers or other incredibly experienced community members in the room.
Last week was the hackathon before Umbraco Spark. Although this time, it was a hackathon with a twist…
Steve Temple, Technical Director of Gibe Digital (the organisers of the Umbraco Spark event), had an idea for this hackathon. He envisaged a "Package Jam" - think Game Jam, but with Umbraco Packages - where people had a shared focus to see how far they could get building a new package during the hackathon, and at Spark itself, with the final session of the day for people to demo and announce a winner.
I confess I was a bit sceptical when Steve first shared the idea with me. Would people be able to get far enough along to make an interesting demo? Would people be up for demoing in front of everyone? Would people want to spend any time at Spark itself in a side room coding away instead of listening to talks on the main stage?
Well the Umbraco community never fails to disappoint - not only did they take to the idea, but they exceeded our hopes for how much would get done and how much learning and knowledge sharing would happen as a result!
I knew people needed to be able to get started (and collaborating) as quickly as possible, so the Spark Package Jam was the deadline I needed to get my “opinionated” package starter template updated for both Umbraco 13 and 15. I am relieved to report that I hit that deadline!
And so yes last Thursday about 35 of us were welcomed into the offices of Umbraco Platinum Partner true digital in Bristol. At the start of the day I demoed my (now updated) template, and then everyone got cracking!
I've written this post because I want to celebrate how much people managed to achieve. I also hope it might serve as inspiration for other such events to take place.
What did people get up to?
The following people appeared on the Spark stage at the end of the day to demonstrate their achievements. Links to the released packages, or public repositories, will be added here when they’re available.
Kevin Jump - "Back Chat" (working title)
A real-time chat function built into the backoffice using a header app and SignalR. Kevin showed a work in progress; I will add a link to the repo when it’s public. Could be a useful example for other people wanting to use SignalR to add other real-time functionality in the backoffice.
Mike Masey - Preview mode rollbacks
Mike wants to improve the UX of the rollback feature in the backoffice with side by side ‘live’ comparisons. He talked us through how it could work, and then after the event it looks like Richard Ockerby has been making progress. Check out the GitHub repo, and perhaps contribute yourself!
https://github.com/Rockerby/Umbraco.Community.RollbackPreviewer
Zade & Tristan - Models Builder Improvements
They wanted to add back the ImplementPropertyType attribute that was lost in models builder since version 9. This allows you to override auto-generated properties by adding an attribute to your own definition (in your partial extensions). They started and released the v15 package on the hackathon day itself!
https://marketplace.umbraco.com/package/umbraco.community.modelsbuilder.propertyoverride
Jonathon Cove - Dad jokes
As his first adventure into package development, Jonathan created a header app which generates dad jokes. The first, but not the last, of the fun demos!
https://github.com/jonathoncove1/umbraco-dadjokes
Busra Sengul - Encryption Property Editor
Busra had previously released this for Umbraco 8, and started a Umbraco 13 version at the hackathon, with the aim of also releasing for Umbraco 15. The package adds a text box property editor with a built-in encryption function: the stored data is encrypted but displays in the backoffice decrypted.
https://github.com/busrasengul/Umbraco.Community.EncryptionPropertyEditor
Andy Felton - Application Insights Log Viewer
Andy’s demo showed him overriding the default log viewer in the backoffice with a version that shows all your logs from Application Insights (thus supporting coming from multiple servers).
https://github.com/stevetemple/Umbraco.Community.ApplicationInsightsLogging
Richard Ockerby - Email logger
Richard showed a new dashboard that gives visibility over emails that have been sent by the core mail provider. The package will log the send status, with the aim to allow resending after failure.
https://github.com/Rockerby/Umbraco.Community.EmailLogger
Steve Temple - Custom login page pictures
Sophie Neale, who works at Gibe, is the person we see on the login screen of Umbraco 15. As our second fun demo, Steve built a ‘custom login screen’ package that will change the login screen image when you get your password wrong, or you keep failing, with Sophie’s face getting more and more angry!
https://github.com/stevetemple/Umbraco.Community.CustomLoginScreen
Matt Begent - CLS Police
Matt’s CLS Police package adds a dashboard that compares your website core vital statistics against your competitors. If you’re significantly underperforming you get sent to jail. A useful dashboard, with a fun twist!
https://github.com/mattbegent/CLSPolice
Nikolaj Geisle - Enhanced media
Nikolaj’s day job is working on the CMS Team at Umbraco HQ, but at the hackathon he got to hack on his own package: adding functionality to the Media Library. He demoed a new dashboard for the media section that lists any unused media items, and allows you to quickly delete them. He also added some functionality to improve the experience of restoring from the recycle bin too.
https://github.com/Zeegaan/UnusedMedia
Georgina Bidder - Lorem Ipsum Generator
Having implemented this for several clients, Georgina built a package that adds a Tiny MCE addon so that editors can quickly insert Lorem Ipsum content into rich text editors. Georgina managed to release this, her first ever package, on the day of hackathon for Umbraco 13, and will look to implement the same function in Tiptap for Umbraco 15.
https://marketplace.umbraco.com/package/umbraco.community.loremipsumgenerator
Paul Seal - Dynamic Images
Paul showed progress with a package he had started on that would dynamically add text specified by the editor in the CMS to an image. Nothing publicly visible yet but I’ll post when there is!
Lee Kelleher - Clippy
The final demo of the day fell to Lee, one of the most experienced Umbraco package authors. When not helping others make progress with their ideas, Lee flexed his package building skills and finally implemented what we’d all been waiting for: Microsoft’s office assistant, aka Clippy, in the backoffice!
https://github.com/leekelleher/umbraco-clippy
In the last week, I also learned that other hackathon attendees had been making progress:
Jacob Overgaard - Server Variables
Jacob, frontend team lead for the CMS at Umbraco HQ, was a tad busy assisting others at the hackathon, but on his journey back to Denmark after he worked on his own package: a low/no-code solution to access server variables with JavaScript in Umbraco. Check out the package on the Umbraco Marketplace to learn more
https://marketplace.umbraco.com/package/umbraco.community.servervariables
Owain Williams
Owain has been working on a package to add some mental health related tools to the backoffice, more on that coming soon I’m sure!
How did the Package Jam work?
If you’re considering running a similar event, here’s how we (mainly Steve Temple!) managed it:
- When people bought their ticket to Spark they were asked to tick a box if interested to hear about the hackathon / Package Jam
- A couple of weeks before the event, Steve shared a google sheet with the interested people to log their ideas for what packages to build
- Umbraco HQ created a Discord channel specifically for the #spark-packagejam to encourage collaboration and aid communication
- People were asked to put their names against packages they were keen to work on
- At the hackathon a lot of people used my Opinionated Packages Starter Template so that within a few minutes they had a complete working solution ready to push to GitHub and collaborate with others
- There was a side room at Spark for people to continue hacking on their packages during the main day
- The final session of Spark was the “Package Awards”:
- I’d asked people in advance if they were willing to demo: 13 brave folks agreed!
- Myself and Sophie Neale from Gibe hosted the session, and explained to the attendees how the event had worked
- Each person had a couple of minutes to plug in their laptop and talk us through what they did and who they worked with
- After all the demos were finished Sophie and I read out each person and their package name and asked the crowd to cheer for who they thought deserved to win
- The Spark attendees chose Georgina Bidder and her Lorem Ipsum Generator package as the winner! Congratulations George: we hope to see more packages from you in the future!
And Finally…
A very big thank you to Steve Temple for having the idea and making it a reality, to true digital for being such wonderful hackathon hosts, to everyone who came along to the hackathon, but most especially to those 13 people who demoed their achievements in front of everyone at the Spark event. No-one had technical fails or looked nervous, and considering for quite a few it was their first time on an Umbraco stage, that was no mean feat. High Five You Rock to each and every one of you!
Check out this video that true posted on LinkedIn of the hackathon (slide right to see the after-video).
Top comments (0)