A self-hosted social posting tool, ensuring you own your own content

In my ongoing experiments with ai-assisted dev of tools I’d like, I’ve create Broadside to solve a specific irritation. As we all know, “If you aren’t paying for the product, you are the product.” and as all these tools develop their own special enshittifications, it feels like it’s time to have another go at inverting the models.

Also, with the demise of that old-bird-site, things have become more federated and fragmented. I wanted to post across Mastodon, Bluesky, Threads and LinkedIn at the same time, and do so without ‘losing’ what I’d written the moment I hit publish.

Broadside it a small web app that posts to all four simultaneously, keeps a searchable archive of everything locally, and pulls social feeds into one place, including creating useful open things, like an RSS feed. This post is about why I made it, what it does, and the slightly eccentric vocabulary it uses.

You can read all my posts here: https://broadside.dgen.net/bindery/gavin

If you’d like to try it, just ping me (on any channel).

You probably didn’t know LinkedIn is a one-way street

If you post to LinkedIn regularly, you’re building a professional record in a place you cannot back up. They do not let you download your own posts in bulk – the “account data export” doesn’t include posts. You can use their API to POST to the site, but not GET your own content back (without paying).

For the platform most associated with professional credibility where people are documenting their work, sharing hard-won thinking, and announcing things that matter to them, to offer no way to retrieve what you’ve put there is, to be generous, unprofessional.

The same applies across many platforms, to varying degrees and I’ve maintained this website (dgen.net) to be both a business site and a master record of my own works, that I completely control. With music I am addressing a version of this by building a tool to convert my Spotify playlists into a physical record catalogue, because streaming solved discovery but not ‘ownership’. Social media has the same shape: it solved distribution but not possession. Broadside is an attempt to do something about that.

And, yes, of course there are loads of self-publishing tools, but they’re often commercialised into their own SaaS businesses with similar issues of enshittification (looking at you TweetDeck/HootSuite), or too ‘techy’ to actually do yourself. Alternative services, like Mastodon are great but also directly compete with, rather than replace the production flow.

What Broadside does

Broadside runs on my own server (you can host your own too, once I get it on GitHub, open licence of course), and it supports multiple users (so I can enable my constellations and communities to use it for free). It connects social accounts, enables a post to be written in a single compose window, and it posts simultaneously to whichever platforms you select (Mastodon, Bluesky, Threads, LinkedIn, or any combination. Note that Facebook and others don’t allow connections like this). Link previews, image attachments and scheduled posts all work.

It also is keep a copy.

Before anything goes to a social platform, it’s written to an archive on my server. That archive is searchable and downloadable. If any other platform disappears, your posts don’t (nb: if my/your server vanishes, you have backups everywhere else you’ve posted). If you want to find what you said about something three years ago, you can. This useful to me – having a personal, searchable archive of all my public writing is just nice, independently of the cross-posting convenience.

There’s also a feed view, pulling in my Mastodon and Bluesky feeds together into one place (NB: LinkedIn and Threads don’t allow this, and Facebook doesn’t allow anything).

With added AI?

I added an AI-assisted research tool that automatically surfaces related links (e.g. Wikipedia, academic papers, Guardian articles, Hacker News discussions and things I’m experimenting with) for anything I post. This last bit genuinely surprised me with how useful it can be by lowering the ‘friction’ in then googling for references – in an age of fake news, it’s nice to filter on some diverse-yet-trusted sources. The whole thing was built with Claude and, like my other experiments is stuff I wanted but would never have had time to build a decade ago.

And, a white-listed constellation?

Of course, once you’ve got a publishing tool that works well, you can share it with your friends. And then you have something that’s bot-free, curated (h/t haddock), and more akin to the original idea of shared bookmarking and socials. Back to basics, without the tracking (no, really tracking, like LinkedIn scanning all your browser extensions to fingerprint your machine and track you is actually a thing, never mind cookies).

All while not having to switch away from, or shut down, places you like to hangout with other friends and colleagues.

You can probably guess where I might go next with this: not leaving places, but rather connecting them.

On words

Those who know me already know I love finding fun words (e.g. Icebreaker One, AMEE, Tornado) to make using things just feel good. And, of course, design matters deeply to all of this so I’m experimenting with letting people choose their own themes. We love to personalise things.

Note that while I’m using ai for these prototypes, a quick plug for my friends at philpottdesign.com, just because ;).

I’ve given Broadside its own vocabulary because I think it’s more interesting than calling things “dashboard” and “feed”.

Broadside: historically, this is a large sheet printed on one side and distributed as news, proclamations, or verse – one of the original one-to-many formats. It felt right for a tool that takes one piece of writing and to many public spaces at once. Obviously, given my interest in things nautical, broadside is also when all the guns on one side of a warship are fired simultaneously… so quite apt!

The Murmurator: the compose interface. A murmuration is what you see when a flock of starlings moves as one coherent shape. Social media can feel a bit like that and The Murmurator is where you introduce something into the flow.

Murmurings: your own incoming feeds from the people you follow, across the networks.

The Bindery: your personal post archive. The Bindery refers to “a studio, workshop or factory where sheets of (usually) paper are fastened together to make books” [wikipedia] so felt apt for where your own posts are gathered, ordered, and made publicly accessible by default (as a public web page and RSS feed).

Commonplace: As I add people from my constellation into our shared Broadside instance, the Commonplace is our collective archive: everything everyone has posted, in one place (as a public web page and RSS feed). (originally I used Sammelband a German word for a ‘volume that binds together separately published works’ but that was getting a bit too esoteric, even for me).

Addenda: re-establishing control

Stepping aside from all the stupid AI-hype, I think we’re at a fascinating juncture that reminds me of the 1990s early web. The same AI tools that vast platform players are racing to deploy to bind us to them, are equally available to all of us.

We can all now build personalised infrastructure, in hours or days, that would have taken dedicated teams many months or years before. Broadside is an example of this: a small act of reclaiming your relationship with your own writing, from the platforms you publish on and can control.

If we can’t build things for everyone, it won’t work for all of us.

To quote NTK, “THEY STOLE OUR REVOLUTION. NOW WE’RE STEALING IT BACK”

Turning your Spotify playlist into a record collection, and why that could be really disruptive

Quick summary

I’ve long wanted to make it easy to buy the music of artists I like, not least because they get better £pay on physical, but when (not if) online services de-list things and hard drives break, they don’t vanish forever.

So, here’s a first experiment: pulling out one of my annual playlists into a ‘catalogue/shop window’ that links to various retailers, CD and Vinyl, and Bandcamp if that exists for the artist.

This is only 2025 for now, while I work out some of the bugs. https://dgen.net/w/playlists/2025.html

Update: now live at https://secondpress.club/p/5lx398

Some reflections (over the past three decades)

This is an example of shifting power dynamics in consumption, engagement and how we can help deliver open markets that work for everyone. I’ve also noticed that the music sector is often an early adopter/trailblazer for broader societal shifts.

Music streaming has solved discovery: a near-infinite library at your fingertips, finding new artists, forgotten classics and new connections has never been easier.

However, there’s an issue buried in that convenience: you don’t really ‘have’ any of it. If a label dispute pulls an album, or you cancel your subscription, your carefully curated listening history evaporates. This can also apply to your ‘downloads’ (even with good hard drives and cloud services, we still lose our digital stuff).

I’ve long thought about what it actually means to have a music collection. Back in the day (1998!) I put Virgin Megastores online: all 60,000 products (which is how may CDs were in a typical store), and designed a service with a colleague, Rick Glanville, where we could sell a subscription to digital downloads and give away a tiny MP3 player as part of the package. We even got Cambridge Electronics to make a little postage-stamp sized player. [yes, these pre-dated the iPod, iPod Shuffle and Spotify by many, many years].

While on that journey it struck me that we were in the process of reducing ‘music’ to a search box, killing most of the actual experience outside of listening, destroying record stores, and as humans we were likely to eventually push back on something so techno-reductionist.

Many of the things we enjoy about music listening are physical: this has played out in the long-term success of stores like Rough Trade, and the resurgence of vinyl (even cassettes are back!). At the time, as a bit of rebellion, I also released my own music as a 19kg solid granite MP3 player and radio transmitter.

In one of my many roles as CEO of Consolidated Independent, we helped get over 20% of the world’s music online: millions of tracks from thousands of labels distributed to hundreds of retailers and services. Some of the labels were terrified of the web destroying their business due to piracy, but the whole system had to embrace it, including sorting out commercial realities. Sadly some of those realities massively skewed market value to ‘the big guys’, including ludicrous statements from some (let’s say ‘commercial’) CEOs that if artists wanted more money they should increase their output (as if art and soup cans are the same thing ).

Don’t get me wrong, I love the fact we have vast access to new music, and listen to a very diverse range of music. And, it creates different challenges for us as consumers and music fans. Now we can have more agency in balancing out the way the music market works – the cathedrals are not going anywhere, but the bazaar has some new spaces.

What we can now do

One of the things I missed when listening was album art, and a few years back I made a 12″ sized screen to pull down and display whatever I’m playing on Spotify (AI helped me code this, and I would never have got around to it without that help).

Building things just for me is fun, and…

Interestingly, with just a few AI prompts and some lightweight code, I created a tool that takes my Spotify playlist, cross-references every album against Discogs, and produced a personalised catalogue.

Based on the individual tracks I’d added to my annual playlist (which I have going back 8 years now), it looks up the album that it was on. It then works out which are available on CD and Vinyl (or digital–only), where to find them, and who sells them. And, not ‘just Amazon’, but others: Rough Trade, HMV and directly linking back to the artist’s Bandcamp. This is just the start of and idea, and took less than half a day to create it as a prototype.

This makes me wonder about a quiet promise of AI that doesn’t get talked about so much: enabling each of us to build the world we’d like. This will disrupt the big platforms (Spotify, Amazon, Apple) who have invested billions in making their aggregated experience frictionless and hard to leave. They’re using AI to make them more personalised and ‘sticky’. We can do the same for ourselves.

The same AI tools they’re racing to build are equally available to you and me. We can now spin up personalised services—in an afternoon—that would have taken a dedicated development team a decade ago.

So, this is a prototype of a custom, personalised catalogue and record-buying assistant that can be built around your taste, routing money to your preferred retailers that you can share with your friends. It is a small but real act of reclaiming your relationship with artists, and their music, from the big platforms.

We can help bridge the gaps and connect the smaller services together (back to the original vision of the web).

And, looking forward, we can start blending, sharing, cross-connecting using federated services like Mastodon and then connecting people, places, gigs, merch, in a way that could actually help everyone.

Isn’t that exciting!?

I wonder if AI might actually help us actually break away from native mobile apps for a lot of things & ‘get back to the web’?

Many modern hi-fi amplifiers have ‘an App’. They are, uniformly (from what I can see), terrible.

In this post I show how I ‘fixed this’ in under an hour using ai to do something I would never, ever have got around to doing. Given how much I listen to music, I know it’s going to save me many hours of irritation. It even left me with enough time to write this post.

Let’s start with the challenge. In the UK we spend about £600M a year on hi-fi stuff: that seems like quite a lot. And the higher-end kit costs more than your PC. However, while they ‘try and be digital’, it’s like walking back into the 1990s as a user.

Here are some screenshots from the ‘flagship’ Marantz app starting up.

I should point out that not only is the user interface terrible (including trying to get you to sign up to their HEOS garbage) but it takes needless ages to start up and navigate. Those spinning disks spin for a long time, and then present with a page with a tiny round button for the volume and mostly meaningless other stuff that’s too small to consistently accurately tap. It’s really easy to accidentally turn the volume up a lot (which on a >3kW system can be alarming if you’re not expecting it).

Let’s say you want to turn the volume down (the #1 thing you do on an amp ‘instantly’), it can take up to 10 seconds to get there. This means you revert back to the remote control, or – heaven forbid – have to actually stand up and turn actual the volume control – there are plenty of other apps that tell us when we need to move . Further, to get into any granular controls such as changing sound processing, or changing the volume on individual surround channels is painfully slow (tens of seconds to get to, seconds for each change), cumbersome and, actually just unusable. I often want to do this for specific tracks when in a proper listening session.

Clearly in 2026 this really isn’t good enough. Fortunately this is now something (almost) anyone can fix without waiting for manufacturers to wake up and do something.

Googling around the docs there are some API standards and I’d done some previous command-line work to pull status and push things like volume to see if it all actually worked (it did).

But now, with the wonders of AI (in this case, Claude.ai) it is almost magically trivial to make your own interface.

In this post I show how easy (and things that can be frustrating).

Let’s start with a bit of magic: I asked Claude (thinking that this wouldn’t be enough)

> develop a web interface for the Marantz SR7015 using its API

It wasn’t just “enough”, it even styled the page with custom fonts and an image of a surround setup. To get it actually working (locally, on my Mac) I just had to give it the error I got

> it says "Cannot reach 192.168.1.46"

At which point the AI created a local proxy server, told me how to install it and some supporting packages (with copy/paste instructions). If I rewind to when I used to be able to actually code, I think this would have all easily taken me a day. Instead it took this aging hacker about 30 mins of faffing around. This was it – a fully working, way better visual interface and way better user experience (it loads instantly with no noticeable latency on the controls), and individual controls, all on one screen. And, against a black background as usually listening when it’s dark (or watching a movie).

I then spent a few hours playing around with layouts to see what was possible, then asked the AI to make a version I would run on my Pi-Fi (the Raspberry Pi I have that displays album art when Spotify is playing). Which, of course, it did at a similar pace.

This means I can access a web page on my home’s wifi network on my phone, laptop or desktop – as can anyone I give the web address to who is with me. I can use it as a remote for the amplifier, not just for volume, but including controlling all the parameters I actually want to access instantly, with nice big buttons and only the things I need. It still wasn’t able to do some things (like more nuanced reading/writing of custom fields).

I then added new functionality – to pair and group left and right speakers into ‘front’, ‘surround’ so I can control the top-front-side-back distribution more easily (unless you’re a sound engineer, you’ll be surprise how much more this varies than you’d think based on the mix and type of the music).

And, finally, for now, a joystick control to move the balance around between all 11 speakers. Which was done with a single prompt:

> create a joystick control to balance the audio between all the speakers

Next up I’m thinking of keying together listening room profiles per track, keyed into what’s playing on Spotify so the entire balance of the system can auto-configure based on what’s playing. This would then include custom listening profiles and sound stages I’d set up for specific favourite tracks. It’s almost as if one could take all this too far*…?

* Looking out at the hi-fi geek landscape, there is no end of completely stupid nonsense things people do (from £1,000 audiophile USB cables to ‘elevated speaker cable risers‘), none of which make a single bean of difference to anything but your wallet. Once you’ve got a basic system in place by far the biggest differences you’ll be able to actually hear are (a) treating the room with sound insulation, and/or (b) treating the distribution, balance and EQ of the signal itself in your space, which is what I’m doing here.

Those who set the rules and govern data flows, control the value

Data infrastructure is not a technical concern nor a subset of digital policy.

It is a core determinant of national power. It shapes how a country governs itself, secures its citizens and its businesses, how it shapes and grows its economy, and how it positions itself in an increasingly hostile geopolitical and commercial landscape. Data infrastructure also increasingly moderates the perceived legitimacy of relationships between government, institutions, business, and the general population.

As data mediates finance, energy, health, transport, housing and public services, the ability to govern how data flows, who controls it, through what processes and on what terms, is now inseparable from national interest.

Without sovereign control of the rules, permissions and layers of trust that determine data access, use and re-use, the UK risks outsourcing core economic and civic functions to foreign platforms, to standards outside of its control and incentives outside its jurisdiction.

This is not just a question of efficiency or cost: it is a question of agency. Who sets the rules of the digital economy? Who captures the value? Whose values and what incentives are encoded into the systems that increasingly shape everyday life and trade?

Addressing these questions can help to shine light on where important centers of power and decision-making capacity lie across the economy, and stimulate debate about what incentives, risks and benefits may exist. These should be considered on a short, medium and long-term commercial and geopolitical basis. They also highlight that a modern data economy requires a secure, trusted and domestically accountable, legally enforceable layer for organisations who use and control data. This is not just technical plumbing but foundational to democratic legitimacy and social trust.

At the same time, the opportunity is substantial. Countries that invest in trusted, interoperable, market-enabling data infrastructures are laying the foundations for a new wave of productivity and growth. The UK’s experience with Open Banking showed what is possible: clear rules, shared standards and strong governance unlocked a multibillion-pound fintech ecosystem used by millions, and positioned the UK as a global exemplar. As it extends this approach with primary legislation across energy, property, health, transport and other sectors it can unlock new markets, attract investment, and reduce friction across the economy.

Countries that can verify business identities while managing consumer permissions and protecting citizen rights in the digital sphere are better equipped to counter fraud, organised crime and interference from hostile actors. Those that can’t expose themselves to systemic risk.

In an adversarial geopolitical environment, data assets such as energy telemetry, financial behaviours and mobility patterns are strategic resources. We must proceed by assuming all digital systems are under continuous both commercial and ‘bad actor’ attack. Resilience depends on open markets, transparency, interoperability, assurance and governance, not just ‘technology infrastructure’ at scale.

This opportunity is also threatened by corporate capture. A small number of (predominantly US-based or Chinese) technology firms increasingly control critical digital infrastructure: cloud, identity, payments, AI models, developer ecosystems and now the data layer itself (data is a different category to technology).

Through proprietary or ‘high friction’ standards, high switching costs and vertically integrated platforms, these firms are de-facto rule-makers. They shape access, pricing and innovation trajectories without public accountability. This concentrates economic power, weakens regulatory leverage and displaces public value with private extraction. Such challenges have been well documented for some time (see selected references).

This is not inevitable and the UK has a credible alternative path. It can use its legal institutions, regulatory sophistication, academic depth and civil-society capability to lead a different model, based on open standards, open source and open governance. Open source in this context is not an ideology but a strategic instrument that underpins the principles of a free market economy. Properly governed, it reduces dependency, improves transparency, lowers barriers to entry, cost and friction, and allows domestic firms to build on shared foundations rather than renting infrastructure from abroad.

Crucially, open governance preserves cultural and democratic sovereignty. It ensures that the rules of the data economy reflect UK legal norms, social values and public-interest objectives.

Through modular, interoperable trust frameworks, the UK can export not just technology but governance itself, positioning the country as a global leader in trusted data markets. This is how economic value can be created at scale: enabling many firms to innovate on shared infrastructure, rather than entrenching a small number of dominant platforms.

The strategic choice is clear: data infrastructure must be treated not merely as national infrastructure, but as a core component of the economy itself. The UK should act accordingly: owning the rules, investing in open components, institutionalising trust frameworks, and using this architecture to drive growth, resilience and global influence. Nations that do this will shape the rules of the digital age. Those that do not will inherit rules written elsewhere.

Selected references

Khan, L.M. (2017) ‘Amazon’s antitrust paradox’, Yale Law Journal, 126(3), pp. 710–805. https://yalelawjournal.org/note/amazons-antitrust-paradox

Kenney, M. and Zysman, J. (2016) ‘The rise of the platform economy’, Issues in Science and Technology, 32(3), pp. 61–69. https://issues.org/the-rise-of-the-platform-economy

OECD (2019) Competition policy in the digital age. https://oecd.org/competition/competition-policy-in-the-digital-age.htm

OECD (2022) The evolving concept of market power in the digital economy. https://oecd.org/daf/competition/the-evolving-concept-of-market-power-in-the-digital-economy.htm

Srnicek, N. (2017) Platform capitalism. https://politybooks.com/bookdetail?book_slug=platform-capitalism–9781509504862

Zuboff, S. (2019) The age of surveillance capitalism: The fight for a human future at the new frontier of power. New York: PublicAffairs. https://publicaffairsbooks.com/titles/shoshana-zuboff/the-age-of-surveillance-capitalism/9781610395694/

Fetter J., Rao, K., Eaves, D. (2025) State of Digital Public Infrastructure Report https://www.ucl.ac.uk/bartlett/publications/2025/nov/2025-state-digital-public-infrastructure-report

I like to have local copies of everything, so when I upgraded to a new Mac I selected “Mirror files” below and set it running. It immediately moved everything on my GDrive cloud storage to the bin (ie. treated my local empty machine as the ‘new thing’ and overwrote everything in the cloud). This is, obviously, not the behaviour anyone wants.

The ‘solution’ – after you’ve gone online into the Bin, very carefully selected everything and clicked ‘Restore‘ (not Delete forever(!)) – is to launch the application in “Stream files” mode. Then, when it starts to stream go into the finder, right-click and select “Download Now“.

The app itself has a terrible user experience for such a tiny number of options: it’s not always clear which account your are in (I have many Gdrive accounts), it’s not consistent in language and the menus often loop back to the same thing. As for trying to set it to save to an external drive, do let me know if you have any tips as this seems impossible now on the Mac M4 (apparently symlinking is the workaround … it’s 2025!).

“Don’t let the perfect be the enemy of the good”

Oft-cited to help motivate us to get on with making something.

But what happens when we’re not even at ‘good’ yet?

Sorting out today’s challenges needs consideration of what gets ‘embedded in the system’ so that, instead of the 100x impact we need, we stumble into creating 100x friction in a few years.

There is a bar for good enough.

Watching the unfolding developments in data sharing, with environmental reporting as an exemplar of the size of the challenge, we are still very far away from good.

For example, when I look at the landscape of carbon reporting, I see necessary progress from global standards bodies and regulators to mandate that companies must report. This will impact every business (not just the big ones) because those standards mandate that lenders (e.g. banks) must report on the businesses they are lending to (i.e. pretty much every business).

Note the emphasis on mandate and must. This isn’t going to be optional.

The challenges

The natural response to Big Problems is to say things like:

1. We need to start somewhere, so let’s create some approximations that look like things we already do
2. Let’s start by gathering all the data in one place
3. We know this is a global issue, but we need to create something centralised to start with so we can control it

(1) We need to start somewhere so let’s create some approximations that look like things we already do

Our approximations of investment risk for climate are not yet deeply rooted in reality — we don’t know what the real impact of most of our low-carbon investments will be. If I was to ask you to make a financial investment where I could say your bank balance was ‘about $100 plus or minus $50’ you wouldn’t give me your money. Right now, ‘carbon reporting’ has error bars. Large ones.

People are reporting (because they must) and investing (because they also, must) but there is very scant data that shows that $X invested will link to exactly Y tonnes of climate impact. I don’t (just) mean offsetting, I mean exactly how much will I reduce my footprint by if I invest in changing a process. This is ‘okay’ (for some definitions of okay) for the business-as-usual economy, where market corrections emerge over time.

I’m confident we’re investing in a lower-carbon future, but I’m not confident that we’re investing in a net zero future. With climate, physics doesn’t care about our economy. It matters today, not tomorrow, that we have the right numbers.

(2) Let’s start by gathering all the data in one place

This is still the go-to.

It ‘feels’ safer and easier to control. Everyone can kind of get their heads around ‘building a database’. I’ve, covered, this, many, times.

Except, everyone makes their own. They’re mostly tech-first, not market-first. They don’t scale. They are, despite the marketing hype, not interoperable. It’s [still] a mess. It’s going to get a lot worse.

The challenge is that everyone is happy to collect data as long as they don’t need to share theirs.

And, there are $100M’s (hundreds of millions) being invested in private sector companies to create the next generation of eco-unicorns (whether software solutions, insurance companies or rating agencies). The castle & moat business models that these rely on are already at play, and that’s baked into their design.

(3) We know this is a global issue but we need to create something centralised to start with so we can control it

There are over 300 million companies in the world. Most large companies report over 70% of their carbon footprint is in their supply chains (e.g. SMEs). For lenders, the majority of their carbon footprint is in their customer chain (e.g. SMEs).

How are we going to collect, check, calculate, verify, audit and share this data between organisations, across borders, in a comparable manner — and doesn’t undermine business confidentiality or national security?

Part of the solution is to think differently about the market architecture for a data-enabled future

So, what can we do differently? What things can change, and what things won’t?

I doubt we can change the castle & moat business model, so let’s not try.

What we can do now is change how we design data markets from the outset to connect, not [just] collect.

Doing so would be good news for businesses. If they do this, they’ll save money and get more and better data faster, and at scale.

The good news for everyone else is it can help create a race-to-the-top on insights instead of just relentless monetisation of the raw data, while also putting in place the right protections and security that everyone needs (including the businesses themselves), so everyone can engage.

The key is, in business language, to shift where the line is on ‘pre-competitive’ access to data. To achieve this, we must ensure that the right foundations (robust data governance, technical and legal interoperability, common processes) are in place. The outcome will be that we can commoditise access to data, while enabling the value of data to be paid for or exchanged.

The bar for good should be increased competition on analytics and measurable impact, not on the ‘biggest database’ (big data is so 1990s).

In 2024 good should assume (secure, permission-based, valued) access and unleash the power of our systems (human, financial, technical — including AI) to deliver the changes we need, quickly. Really quickly.

The foundations of this have very little to do with ‘web tech’ (it’s already built), and a lot to do with culture, process, law and policy. If you’d like to learn about how we’re doing in one area, to help automate carbon reporting for every UK SME, see https://ib1.org/perseus

What else?

I may write equivalent pieces on data sharing in other areas we are working on, such as finance, energy, water, transport, buildings, and agriculture.

But the tl;dr is the patterns are all identical.

The challenges as large and (really) nothing to do with web technology, despite all the hype. The likelihood of making outcomes good, or mediocre, are the same in every sector I’ve engaged with.

Of course, with climate, mediocre means ‘absolutely catastrophically terrible’.
(see the solid black line)

“8. Pay attention to what is important, not just what is quantifiable.

Our culture, obsessed with numbers, has given us the idea that what we can measure is more important than what we can’t measure. You can look around and make up your own mind about whether quantity or quality is the outstanding characteristic of the world in which you live.

If something is ugly, say so. If it is tacky, inappropriate, out of proportion, unsustainable, morally degrading, ecologically impoverishing, or humanly demeaning, don’t let it pass. Don’t be stopped by the “if you can’t define it and measure it, I don’t have to pay attention to it” ploy. No one can precisely define or measure justice, democracy, security, freedom, truth, or love. No one can precisely define or measure any value. But if no one speaks up for them, if systems aren’t designed to produce them, if we don’t speak about them and point toward their presence or absence, they will cease to exist.”

In a previous post, I hacked this by getting the album artwork jpg from my amplifier. Unfortunately, upgrading to a new amp ‘improved’ its operating system and the artwork vanished, so I had to bite the bullet to get it straight from Spotify. This is far more painful than it needs to be and Spotify could do better (see footnote).

So, with a bit of help (actually a lot of help) from ChatGPT-4* and many rabbit holes explored, I’ve now got a call directly to the Spotify API of “now playing”.

To get going, set up a developer account in Spotify, create a new app and then get hold of

• Client ID
• Client secret

You must also set a Redirect URIs because Spotify requires you to use a web browser to authenticate: it’s not possible to do entirely on the command line (no, you can’t use CURL either, apparently).

This means you need to be able to put a web page somewhere that you can access. I decided to use one of my public web servers, so I can get the image from anywhere, not just at home, but you can use localhost.

Luckily there’s a Python library that does things. So, install python

apt-get install python3

Also, to use a custom env we also need to add it to a Python virtual environment using this:

python3 -m venv myenv
source myenv/bin/activate  
pip install virtualenv
pip freeze > requirements.txt
pip install spotipy

And using source myenv/bin/activate to recall.

After many iterations (thanks ai), we get to a script:

get_spot.py

import spotipy
from spotipy.oauth2 import SpotifyOAuth

# Add your credentials here
SPOTIPY_CLIENT_ID = 'your_spotify_client_id'
SPOTIPY_CLIENT_SECRET = 'your_spotify_client_secret'
SPOTIPY_REDIRECT_URI = 'your_redirect_uri'
USERNAME = 'your_username'
SCOPE = "user-read-currently-playing"

# Create Spotify object with permissions
oauth = SpotifyOAuth(client_id=SPOTIPY_CLIENT_ID,
                     client_secret=SPOTIPY_CLIENT_SECRET,
                     redirect_uri=SPOTIPY_REDIRECT_URI,
                     username=USERNAME,
                     scope=SCOPE,
                     open_browser=False)

token_info = oauth.get_cached_token()

# Check if token needs to be refreshed
if token_info and oauth.is_token_expired(token_info):
    token_info = oauth.refresh_access_token(token_info['refresh_token'])

sp = spotipy.Spotify(auth_manager=oauth)

# Get current playing
current_playing = sp.current_user_playing_track()

# Ensure that a track is playing
if current_playing is not None:
    # Get the album art
    album_art = current_playing['item']['album']['images'][0]['url']
    print(album_art)
else:
    print("No track is currently playing.")

When you first run this, using

python get_spot.py

it’ll give you a URL to copy/paste into a browser so you can authenticate.

You need to have this as a web page at the RedirectURI

<div id="authorizationCode"></div>
  <script>
    function handleAuthorizationCode() {
      const queryString = window.location.search;
      const urlParams = new URLSearchParams(queryString);
      const authorizationCode = urlParams.get('code');

      const authorizationCodeDiv = document.getElementById('authorizationCode');
      if (authorizationCode) {
        authorizationCodeDiv.innerHTML = `${authorizationCode}`;
        // Do something with the code (e.g., store it for later use)
        // You can also make a POST request to your server to exchange it for an access token
      } else {
        authorizationCodeDiv.innerHTML = 'No authorization code found in the URL.';
        // Handle the case when the user denies permission or other errors
      }
    }

    handleAuthorizationCode();
  </script>

Then access it, via <your URL>/<file>?code=<your_ClientID>

You need to copy the ‘return URL‘ (not the code it renders) that it generates and paste it back onto the command line prompt.

After you’ve done that, you can run it again and it’ll (hopefully) give you a URL directly to the artwork on Spotify’s CDN, for example:

https://i.scdn.co/image/ab67616d0000b2737a9230e1ede602936d5056c8

We can then use THAT URL instead of the one I was getting from the amplifier in the previous post.

And, finally, we want to cron this as we did with the local example from last time.

spot.sh (this time, on the server)

#!/bin/bash

folder='/{path}/spotify'
cd $folder

# Activate the virtual environment and get the album art URL
source $folder/myenv/bin/activate
albumart=$(python $folder/get.py)

# Check if the Python script executed successfully
if [ $? -ne 0 ]; then
  echo "Error: Failed to execute the Python script."
  echo "empty" > status.flag
  exit 1
fi

# Download the album art, or exit with an error message if curl fails
if ! curl -o nowtmp.jpg $albumart; then
  echo "Failed to download album art"
  echo "empty" > status.flag
  exit 1 
fi

# Move the temporary image to 'now.jpg'
mv nowtmp.jpg now.jpg

file now.jpg | awk '{print $2}' > status.flag

# Compute the MD5 checksums of the current and live images
current_checksum=$(md5sum now.jpg  | awk '{print $1}')
live_checksum=$(md5sum live.jpg | awk '{print $1}')

# If the checksums differ, update the live image
if [ "$current_checksum"  != "$live_checksum" ]; then
  cp now.jpg live.jpg
fi 

Then, on the pi, we can do this:

up-spot.sh

#!/bin/bash
cd /{path}/hcm

server=`curl -k https://{server}/{folder}/status.flag`
echo server $server

if [  "$server" = "JPEG" ]; then
 if [ `cat status.flag` = "no" ]; then 
	 echo "yes" > status.flag
  	 cp album-cover-live-safe.html album-cover.html
	 ./refresh.sh
 fi	 
 else 
 if [ `cat status.flag` = "yes" ]; then	 
	 echo "no" > status.flag
 	 cp clock-analogue.html album-cover.html
	 ./refresh.sh
 fi
fi

and put that into cron on the pi with:

*       *       *       *       *       /{path}/up-spot.sh > /dev/null 2>&1

and then

test-refresh.sh becomes

#!/bin/bash
cd /{local path}
hifi=`cat hifi.ip`
albumart="https://{server}/{path}/live.jpg"

nowtmp="nowtmp.jpg"
curl -k $albumart > $nowtmp
wait 

if [ -f "$nowtmp" ]; then 
# echo `date` "file exists: " `du -sk $nowtmp` "and" `md5sum $nowtmp` >> log
 mv nowtmp.jpg now.jpg # do as a step in case latency leads to partial download tests
 x=`md5sum now.jpg  | awk '{print $1}'`
 y=`md5sum live.jpg | awk '{print $1}'`


 if [ "$x" != "$y" ] ; then
#   echo "updating" `date`  $x $y >> log
  cp now.jpg live.jpg
   ./refresh.sh
 fi

fi

See the previous post for more on other bits of script and cron.

* I started with “write a shell script to get the ‘now playing’ album art from my spotify account”

Footnote

As an aside, I found that this nice chap has done a *really simple* integration where you just authorise his app and it tells you what’s playing. Unfortunately, it’s not generating the images (just the titles) and I didn’t want to rely on a 3rd party service [hint: Spotify, just make it this easy, good grief!]

Today’s example of how easy AI can make it to write code. The interactive animation below is the final output from various experiments below.
[My words have this colour background. My instructions to the AI are in bold.
The rest of the content on this page is the AI. All of it, including words, code and highlighting.]

To begin with I just asked it the following:
write html, css and javascript to demonstrate a planet orbiting the sun
It replied…

Creating a realistic 3D planet orbiting the sun requires more advanced graphics and libraries, but I can show you a basic demonstration using HTML, CSS, and JavaScript that simulates a simple planet orbiting the sun

example.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Orbiting Planet</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="sun"></div>
  <div class="planet"></div>
  <script src="script.js"></script>
</body>
</html>

CSS (styles.css):

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.sun {
  width: 100px;
  height: 100px;
  background-color: orange;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.planet {
  width: 30px;
  height: 30px;
  background-color: blue;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript (script.js):

let angle = 0;
const orbitRadius = 150;
const orbitSpeed = 0.005;

function animatePlanet() {
  const planet = document.querySelector('.planet');
  const sun = document.querySelector('.sun');
  const sunRect = sun.getBoundingClientRect();
  const centerX = sunRect.left + sunRect.width / 2;
  const centerY = sunRect.top + sunRect.height / 2;

  const x = centerX + orbitRadius * Math.cos(angle);
  const y = centerY + orbitRadius * Math.sin(angle);

  planet.style.left = x + 'px';
  planet.style.top = y + 'px';

  angle += orbitSpeed;
  requestAnimationFrame(animatePlanet);
}

animatePlanet();

This code creates a basic representation of a planet (blue circle) orbiting the sun (orange circle). It uses CSS to position and style the sun and the planet, and JavaScript to calculate the position of the planet as it orbits the sun.

Please note that this is a simplified demonstration and does not include realistic physics or 3D graphics. For more advanced and realistic animations, you would need to use libraries like Three.js or other WebGL frameworks.”

This is pretty astonishing [output]

but I wasn’t happy with it being a circular orbit, so I asked it to:
redo with an elliptical orbit

Creating an elliptical orbit requires more complex mathematical calculations and is beyond the scope of basic HTML, CSS, and JavaScript. However, I can show you an example using the p5.js library, which is a JavaScript library for creative coding and visualization. The p5.js library simplifies handling graphics and animation, making it easier to demonstrate an elliptical orbit.

1. First, include the p5.js library in your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Elliptical Orbit</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <script src="sketch.js"></script>
</body>
</html>

2. Next, create a JavaScript file (e.g., “sketch.js”) that will handle the animation and display of the elliptical orbit:

let sun;
let planet;
let orbitRadiusX = 150;
let orbitRadiusY = 100;
let angle = 0;
let orbitSpeed = 0.01;

function setup() {
  createCanvas(windowWidth, windowHeight);
  sun = createVector(width / 2, height / 2);
  planet = createVector(sun.x + orbitRadiusX, sun.y);
}

function draw() {
  background(240);

  // Draw the sun
  fill('orange');
  ellipse(sun.x, sun.y, 40, 40);

  // Calculate the position of the planet in the elliptical orbit
  let x = sun.x + orbitRadiusX * cos(angle);
  let y = sun.y + orbitRadiusY * sin(angle);

  // Draw the planet
  fill('blue');
  ellipse(x, y, 20, 20);

  // Update the angle for the next frame
  angle += orbitSpeed;
}

The above code sets up a canvas, defines the sun and planet as vectors, and uses trigonometry to calculate the position of the planet as it moves along an elliptical orbit around the sun. The orbitRadiusX and orbitRadiusY variables determine the shape and size of the elliptical orbit, while the orbitSpeed variable controls the speed of the orbit.

Save these HTML and JavaScript files in the same folder and open the HTML file in a web browser. You should see an animation of a blue planet orbiting an orange sun in an elliptical path. Feel free to adjust the values of orbitRadiusX, orbitRadiusY, and orbitSpeed to experiment with different elliptical orbits.

This is a great example of how game-changing AI is becoming. To see the two bits of code (copy & pasted) in action, click Circular or Elliptical. Remarkable.

And then my friend Andy noticed it wasn’t doing a Keplerian orbit, so
redo with a keplerian orbit
led to this

Creating a Keplerian orbit involves implementing more complex mathematical formulas to simulate the motion of celestial bodies following Kepler’s laws of planetary motion. To do this, we’ll use the p5.js library to handle graphics and animation.

1. First, include the p5.js library in your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Keplerian Orbit</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <script src="sketch.js"></script>
</body>
</html>

2. Next, create a JavaScript file (e.g., “sketch.js”) that will handle the animation and display of the Keplerian orbit:

let sun;
let planet;
let a; // Semi-major axis
let b; // Semi-minor axis
let angle = 0;
let orbitSpeed = 0.01;

function setup() {
  createCanvas(windowWidth, windowHeight);
  sun = createVector(width / 2, height / 2);
  a = 150; // Set the semi-major axis
  b = 100; // Set the semi-minor axis
  planet = createVector(sun.x + a, sun.y);
}

function draw() {
  background(240);

  // Draw the sun
  fill('orange');
  ellipse(sun.x, sun.y, 40, 40);

  // Calculate the position of the planet in the Keplerian orbit
  let x = sun.x + a * cos(angle);
  let y = sun.y + b * sin(angle);

  // Draw the planet
  fill('blue');
  ellipse(x, y, 20, 20);

  // Update the angle for the next frame
  angle += orbitSpeed;
}

The above code sets up a canvas, defines the sun and planet as vectors, and uses trigonometry to calculate the position of the planet following Kepler’s laws of planetary motion. The a and b variables determine the size and shape of the Keplerian orbit, while the orbitSpeed variable controls the speed of the orbit.

Save these HTML and JavaScript files in the same folder and open the HTML file in a web browser. You should see an animation of a blue planet following a Keplerian orbit around an orange sun. Feel free to adjust the values of a, b, and orbitSpeed to experiment with different Keplerian orbits.

Interesting but still not quite there

So let’s
place the sun at a focus point and add gravity

To add gravity to the Keplerian orbit simulation, we can use Newton’s law of universal gravitation to calculate the gravitational force between the sun and the planet. The force will affect the acceleration of the planet, causing it to move in a curved path around the sun.

Here’s the updated code that includes gravity:

let sun;
let planet;
let a; // Semi-major axis
let b; // Semi-minor axis
let c; // Distance from the center to focus (c = sqrt(a^2 - b^2))
let angle = 0;
let orbitSpeed = 0.01;
let G = 0.5; // Gravitational constant

function setup() {
  createCanvas(windowWidth, windowHeight);
  sun = createVector(width / 2, height / 2);
  a = 150; // Set the semi-major axis
  b = 100; // Set the semi-minor axis
  c = sqrt(a * a - b * b);
  planet = createVector(sun.x + c + a, sun.y);
}

function draw() {
  background(240);

  // Draw the sun at the focus point
  fill('orange');
  ellipse(sun.x, sun.y, 40, 40);

  // Calculate the position of the planet in the Keplerian orbit
  let x = sun.x + c + a * cos(angle);
  let y = sun.y + b * sin(angle);

  // Draw the planet
  fill('blue');
  ellipse(x, y, 20, 20);

  // Calculate the distance between the planet and the sun
  let distance = dist(x, y, sun.x, sun.y);

  // Calculate the gravitational force between the planet and the sun
  let force = G * (1 / (distance * distance));

  // Calculate the angle of the force vector
  let forceAngle = atan2(sun.y - y, sun.x - x);

  // Calculate the acceleration of the planet due to gravity
  let acceleration = force / 1; // We can simplify the mass of the planet as 1

  // Update the planet's velocity based on the acceleration
  orbitSpeed += acceleration;

  // Update the angle for the next frame
  angle += orbitSpeed;
}

In this updated code, we introduce the gravitational constant G (you can adjust its value to control the strength of gravity) and calculate the gravitational force between the sun and the planet using Newton’s law of universal gravitation. The planet’s acceleration is then updated based on the gravitational force, and its velocity is adjusted accordingly. The result is a more realistic simulation of a Keplerian orbit with gravity affecting the motion of the planet around the sun.

Save these HTML and JavaScript files in the same folder and open the HTML file in a web browser. You should now see an animation of a blue planet following a Keplerian orbit around an orange sun, with gravity affecting its movement. Feel free to experiment with different values of G and other parameters to observe different orbital behaviors.

Very interesting. It get’s it much more right, but there’s an acceleration that shouldn’t be there. The planet spins faster and faster…

so, rather than try and troubleshoot it, let’s just ask it
why does the speed of the planet accelerate?

Apologies for the confusion in the code. The speed of the planet should not accelerate as a result of gravitational force. In reality, the speed of a planet in a stable orbit around the sun remains constant.

To accurately simulate a stable orbit, we need to use the principles of circular motion and centripetal force. The centripetal force acts perpendicular to the velocity vector, causing the planet to follow a circular path around the sun. In this scenario, the speed of the planet remains constant while its direction continuously changes.

Let’s correct the code to achieve a stable circular orbit:

let sun;
let planet;
let a; // Semi-major axis
let b; // Semi-minor axis
let c; // Distance from the center to focus (c = sqrt(a^2 - b^2))
let angle = 0;
let orbitSpeed = 0.01;
let G = 0.5; // Gravitational constant

function setup() {
  createCanvas(windowWidth, windowHeight);
  sun = createVector(width / 2, height / 2);
  a = 150; // Set the semi-major axis
  b = 100; // Set the semi-minor axis
  c = sqrt(a * a - b * b);
  planet = createVector(sun.x + c + a, sun.y);
}

function draw() {
  background(240);

  // Draw the sun at the focus point
  fill('orange');
  ellipse(sun.x, sun.y, 40, 40);

  // Calculate the position of the planet in the Keplerian orbit
  let x = sun.x + c + a * cos(angle);
  let y = sun.y + b * sin(angle);

  // Draw the planet
  fill('blue');
  ellipse(x, y, 20, 20);

  // Update the angle for the next frame
  angle += orbitSpeed;
}

And, there we have it. We didn’t even need to understand why the planet was accelerating, or if there was a bug in the code, just ask a question and it corrected itself.

I wanted to change the colours and layout a bit, so I asked it to do that too
left-align the scene, make the sun yellow, the background black and the planet blue
and then I thought it’d be fun if we made it interactive, so I asked
add a slider so I can change the value of G and ensure that the animation updates automatically if the value is changed. put the slider at the top in the middle
which it didn’t get right the first time (the slider moved but the planet speed didn’t change) so,
that isn’t updating the value of G in the animation
which fixed it, and then a final bit of fiddling
print the value of G on the screen as well. align the slider so it’s just above the animation
move it 200px left. Keep the value of G next to the slider
and so on, which resulted in the interactive example at the top of this page

And, lastly, for fans of Processing, simply asking it to
rewrite this in Processing
gave this working code

int sunX, sunY;
float a; // Semi-major axis
float b; // Semi-minor axis
float c; // Distance from the center to focus (c = sqrt(a^2 - b^2))
float angle = 0;
float orbitSpeed = 0.01;
float G = 0.5; // Gravitational constant

void setup() {
  size(800, 600);
  sunX = width / 4;
  sunY = height / 2;
  a = 150; // Set the semi-major axis
  b = 100; // Set the semi-minor axis
  c = sqrt(a * a - b * b);
}

void draw() {
  background(0); // Set background color to black

  // Draw the sun at the focus point
  fill(255, 255, 0); // Change sun color to yellow
  ellipse(sunX, sunY, 40, 40);

  // Calculate the position of the planet in the Keplerian orbit
  float x = sunX + c + a * cos(angle);
  float y = sunY + b * sin(angle);

  // Draw the planet
  fill(0, 0, 255); // Change planet color to blue
  ellipse(x, y, 20, 20);

  // Update the angle for the next frame based on the slider value
  angle += G * orbitSpeed; // Use G to modify orbit speed

  // Display the value of G next to the slider
  fill(255);
  textSize(20);
  text("Gravitational Constant (G): " + G, 20, 20);
}

// Event handler for the slider
void mouseReleased() {
  if (mouseX >= 20 && mouseX <= 320 && mouseY >= 40 && mouseY <= 60) {
    // Map the x-coordinate of the mouse to a value between 0 and 2 for G
    G = map(mouseX, 20, 320, 0, 2);
  }
}