So my second #100days challenge comes to an end, and I would say it was another success.
I maybe wasn't quite so strict with it as last time - I may have taken 101 days and what I did on each day varied quite a lot, but I now have 100 updates and achieved quite a lot in that time.
Let's take a look at some of the bigger things I worked on over those 100 days
I launched the redesign and rebuild of my website. It's now a Next.js app, and I am super happy with how it looks and Next.js seems like the perfect choice for me and is only getting better with each update.
There are definitely still plenty of potential improvements to be made, but in general I'm really happy with how it turned out.
The montly and yearly summary pages are really fun and I'm happy with the overabundance of feeds that I now have available.
Although I've still not got around to releasing version 2 of the PostrChild extension I have put a lot of work into and it is very nearly feature complete.
It's definitely much better and feature filled than the first version but there are a few little bugs to iron out before declaring it ready to be published.
I also made a decent amount of random home automation improvements over these 100 days, including tracking my weight, better person presence tracking, more light, motion and temperature sensors.
All in all it was a great success!
I will definitely continue with a lot of the projects I have been working on, but I think I will take a break for a while and do something else with my spare time - I think there are some unplayed video games that are calling out to me!
P.S. Also big shoutout to my fellow Kinsta coworkers who have also complete their 100 days of blogging!
", "url": "https://grant.codes/2020/08/09/100days-conclusion", "title": "#100days Conclusion", "date_modified": "2020-08-09T22:44:32.139Z", "author": { "name": "Grant Richmond", "url": "https://grant.codes" } }, { "id": "https://grant.codes/2020/06/27/micropub-queries", "content_html": "With IndieWebCamp West just about to start I figured this would be a good time to write up some of my thoughts on one of the missing pieces of the IndieWeb ecosystem: Micropub Queries.
The quick version is that Micropub is an open standard to allow publishing to your own website from a variety of apps or clients. It's great. I love it. But it's mostly a one way experience, publishing only.
The spec does define ways to query and update specific posts, but they are generally not implemented by very many clients - perhaps because they are more complex to design and develop or perhaps because it's not the most useful thing.
Recently we've also seen a couple of large projects add Micropub support in iA Writer and Thread Reader. Which is awesome, but I think if queries become more mainstream there is the potential for much better apps and a more convincing reason for Micropub to be integrated into more existing apps.
Proposals for Micropub Queries have been around for a while without a huge amount of movement. Maybe it's a chicken and egg type scenario, if no clients add support, then why add support to your site?
I've made a couple of things that use queries myself. My chatbot can query posts (although it's not very useful) and Together has a useful view of your published posts as well, and Indigenous for Android also can show a basic list of your published posts.
But for me all those examples are fairly basic, and there is a lot of potential for more powerful and compelling experiences.
There are so many possibilities for super useful experiences for Micropub Queries that I'm just going to list off a bunch of things I can think of:
There are so many more that I've thought of and forgotten or that I've not though of yet.
Although there are plenty of nice, usable apps on the Indieweb I still think we are missing a next level experience to really highlight the power and potential of Indieweb technologies, maybe Micropub Queries could help bring that about...
", "url": "https://grant.codes/2020/06/27/micropub-queries", "title": "Are Micropub Queries the missing link?", "date_modified": "2020-06-27T16:14:37.887Z", "author": { "name": "Grant Richmond", "url": "https://grant.codes" } }, { "id": "https://grant.codes/2020/05/06/wi-fi-setup-part-2", "content_html": "After a second day of working on the WiFi I seem to have got it all working... So here goes for #100days 6
Dynamic DNS basically makes it easier to connect to your home server from outside your network as your ip address is likely to change if you don't have some special internet service.
I use https://www.nsupdate.info/ - it's free and open source and bullshit free
To set it up on the router I go to System → Software, first update all installed packages and then install the luci-app-ddns package
This then adds a Services → Dynamic DNS menu item - but a reboot may be needed before it becomes usable. I just edit the default placeholder item with my details from nsupdate.info.
I use a special package for device tracking in Home Assistant which works really well, it's super quick in comparison with other methods I have tried. I use it to switch things on and off when I leave or arrive.
https://github.com/mueslo/openwrt_hass_devicetracker
The instructions are good and pretty easy to follow as long as you can ssh into the router. I generally wget a release onto the router and install it.
Once everything is working you are going to want to make a backup so you don't have to go through this again like I just did.
Just go to System → Backup / Flash Firmware and click the backup button and save it somewhere safe
And that's us more or less done. There are only a few little tweaks left I may want to do like setting the default led not to be so bright and using alternative dns servers but the core of the router is working.
", "url": "https://grant.codes/2020/05/06/wi-fi-setup-part-2", "title": "WiFi Setup Part 2", "date_modified": "2020-05-06T21:59:17.919Z", "author": { "name": "Grant Richmond", "url": "https://grant.codes" } }, { "id": "https://grant.codes/2020/05/05/my-wi-fi-setup-part-1", "content_html": "After somehow totally borking my wifi the other day I have to reset it and all my custom configuration I had. So I decided to try and do a whole bunch of useful things in one go. I am writing this up live as I progress so it will be day 5 of my #100days project, and it will also serve as a reference incase I ever need to dig into my router settings again.
In my unique situation the first thing to do is switch my crappy ISP provided router into ONT mode which basically switches it off and just uses it to forward onto my own router via ethernet. So make a copy of any important settings or info from the basic router and then switch it into ONT mode.
Then with my own router is figure out what version I have and get the latest version of OpenWRT - I have a D-Link DIR-869. It supports both DD-WRT and OpenWRT but for some reason I didn't like DD-WRT so went with OpenWRT instead. In my case since I had installed it before, I had to use the upgrade image, even though I was starting from scratch. Remember that when resetting OpenWRT it is super secure by default and will only allow wired connections.
System → System - Set hostname & timezone
System → Administration - Setup a root password and install your ssh key
Network → Wireless - Setup a main network (probably on 2 radios) + a separate hidden network for smart home devices + country codes
Network → DHCP & DNS → Static Leases - Setup a bunch of static ips for your important devices that you want to talk to
Network → Firewall → Port Forwards - Here I set up a few different port forwarding rules to access my home server from outside the house
That's as far as I have managed to get today so looks like there will need to be a part 2 tomorrow, that goes over setting up dynamicDNS, a couple of extra modules and the all important backup feature.
", "url": "https://grant.codes/2020/05/05/my-wi-fi-setup-part-1", "title": "My WiFi setup - part 1", "date_modified": "2020-05-05T21:34:51.086Z", "author": { "name": "Grant Richmond", "url": "https://grant.codes" } }, { "id": "https://grant.codes/2020/05/01/100-days-1", "content_html": "So for some reason I have signed up to a 100 days of blogging challenge with my lovely coworkers at Kinsta. I've done this before a while ago and while it was challenging it was pretty fun and I got a lot done.
But I'm not much of a blogger. I don't particularly enjoy writing and I don't think I'm very good at it anyway.
But I figure I can work on plenty of other stuff every day! I have plenty of indieweb related projects and a few ideas for things I can write up.
So I've given myself some goals for the next 100 days:
Outside of that I'll just see how it goes!
", "url": "https://grant.codes/2020/05/01/100-days-1", "title": "100 days #1", "date_modified": "2020-05-01T18:24:23.455Z", "author": { "name": "Grant Richmond", "url": "https://grant.codes" } }, { "id": "https://grant.codes/2019/07/08/together", "content_html": "Over the last few months I have been completely rebuilding my social reader Together. So I felt I should write a post about it to highlight what's changed and show off what Together has to offer.
First off just a little info on the idea of a social reader: A social reader is an application that can be used to read and interact with content from all around the web, not just one walled garden.
In the world of the #indieweb that means following other websites and owning all your own content on your own website.
The content you follow from around the web comes in all different forms, it doesn't make sense to force a photo into the same layout as long form blog post.
To help with this Together supports a number of views:
![\"\"](\"https://grant.codes/media/2019/07/08/timeline.jpg\")
The timeline view is similar to what you might find in twitter or facebook.
Each post has it's own card in a scrolling list of cards. Great for shorter format and mixed content.
![\"\"](\"https://grant.codes/media/2019/07/08/classic.jpg\")
Inspired by classic RSS readers such as Google Reader (r.i.p.). The classic view uses a 2 column layout with small post previews on the left and you can click into a single post to view it on the right.
This view works well for longer form articles or news updates.
![\"\"](\"https://grant.codes/media/2019/07/08/gallery.jpg\")
The gallery view shows a grid of photos and videos from your feeds.
You can click into an individual photo or view to view it full screen and swipe through them.
I use this view to follow my instagram feed and the micro.blog photo feed.
A more niche view is the map view that shows where the most recent posts in a channel come from.
This can be used to have a nice view where your friends have checked in recently.
![\"\"](\"https://grant.codes/media/2019/07/08/preview.jpg\")
Something I worked on quite a bit for this release was the feed following and preview UI.
The preview and search is now contained in one unified box, it's now much easier to see exactly what you searched for and what feed you are previewing.
Inline actions are not new in this version of Together, but have seen an update. The actions let you reply, like or repost to your website via micropub, perform admin actions (like blocking and muting sources) and viewing or loading the original content.
New in v3 is the consistent option to attempt to reload the content again from the source. This is useful for (annoying) feeds that only provide a short preview of a posts content.
Another new feature in v3 are the improved notifications. When you post a reply or like, notifications now have buttons to view your created post or immediately delete it if your micropub endpoint supports deletes.
![\"\"](\"https://grant.codes/media/2019/07/08/notification.jpg\")
![\"\"](\"https://grant.codes/media/2019/07/08/following.jpg\")
Channel settings have also seen a bit of an upgrade in v3, in particular the list of feeds you are following, or have blocked or muted. You can now more easily see exactly what each feed is and click through to view it.
This one is exciting to me! Micropub queries are very experimental but if your micropub endpoint supports them it allows Together to query your own website for recently published content that can then be displayed and managed.
My site also supports various post types, so I can see my photos, notes, articles or a variety of other content.
When viewing these posts from your own site you can also edit and delete them all from within Together.
![\"\"](\"https://grant.codes/media/2019/07/08/micropub-query.jpg\")
I constantly find articles and content online that I want to interact with or store on my own website, and the Together share target helps facilitate that. Now if Together is installed as a PWA with chrome, you can natively share content to it, and then interact with that content, like writing a reply or liking the url.
\rWith this new release, I've also added the ability to donate money towards the development of Together if you are so inclined. Payments are handled via my own website at pay.grant.codes\r. At some point I'd like to make this more obvious in a non-annoying way, but I've not thought of how to do that yet.
\rNon monetary contributions are also easier now too! In particular opening a GitHub issue is just a click away with error messages being autofilled into the issue.
V3 of Together was a near total rewrite. Now the backend is a GraphQL server writtin in nodejs using Apollo and the frontend is a react app that reads from the server.
The new backend for Together is a GraphQL server. It is totally independent from the frontend, so if you want to run your own version for your own project you are very much welcome to.
The backend is basically a bridge between GraphQL and Microsub and Micropub.
Microsub maps quite well to GraphQL as it is based on JF2 which is a strictly defined format.
But there are a few transformations that the Together server performs: It converts keys for all properties to camel case, and fills in a few properties with smart defaults, such as feed names are based on their url if there is no name, channels have a number of custom properties that mainly relate to Together settings, these are prefixed with "_t_"
Micropub on the other hand uses uses the much more fluid microformats2 format, which does not map nearly so well, so there is a bit of passing json strings involved and some conversion between mf2 and jf2.
For realtime updates, data is pushed from the server using GraphQL subscriptions over websockets.
On the server your microsub endpoint is polled every minute for updates, and if there is new data it is pushed to the client.
A small amount of persistent data is also stored in a mongodb database. This is mainly for user data, such as their endpoint info, token, and channel settings.
The Together frontend has always been built with react, but now it has been updated to be much more performant using newer features. All components have been converted to use react hooks.
A while back I made (with a lot of help from @Marty McGuire) an IndieAuth helper library that improves on a lot of issues with the auth implementation I had used before. So I now use that in together so there should be fewer issues with people trying to log in.
As part of a bunch of my projects I have forms to create mf2 content for micropub posts, I had this extracted into a reusable form, but it previously was not very well made and didn't follow a lot of react best practices.
But I have also rebuilt this to be way more performant and extendable, so now it is ideal for creating both super simple micropub client interfaces as well as far more advanced, customized interfaces.
This is another little side project that works independently of Together. It simply watches your microsub channels and then automatically performs actions on the content.
At the moment I mainly use it to roll up likes and bookmarks in my channels into one post per day instead of cluttering up my feeds.
It also has an option to only keep the most recent checkin post of all users in a channel, this lets me keep an up to date location map of my indieweb friends.
Want to use all these awesome things I have mentioned but don't know where to start? I've made something that can maybe help you with that! indieweb-starter.glitch.me is a pretty basic indieweb website that you can remix to instantly create your own (quite basic) website that supports IndieAuth, Micropub and Microsub - basically everything you need to get started using Together.
I wouldn't recommend it as your main forever website, but it is a nice place to start out and try out some indieweb functionality before moving to something more permanent.
With the other updates I also needed to update the PostrChild browser extension. So there will be a few updates there soon. The one I am currently happiest with is the automatic caching of a new post you are writing, it makes me feel much more comfortable knowing my content isn’t going to be lost.
I have to give a shoutout to granary and snarfed! Granary is a useful tool that can be used to convert data from silos such as twitter and instagram into a more friendly formats for the open web. I use this to covert my instagram feed and twitter lists into microformats2 html to follow in Together.
So I have been working away on some new features on my site for quite a while now and it looks like everything is about ready.
Honestly I don't particularly enjoy writing long-form content, so it is kind of strange that I have really enjoyed working on this new functionality.
I was rather inspired by the new block editor in WordPress (a.k.a. Gutenberg), there has been a lot of talk about it - with many varying opinions. But what I think can be almost universally agreed on is that an editor that is a bit more flexible than just a single rich text box leads to much more engaging content.
So with that in mind I set about first updating my own site to support long form articles in a much richer manner.
Setting up an article view for my site was fairly straightforward. I wanted it to be about as simple as you could get.
So this view you are looking at is pretty close to the default post view with a few changes:
After that I knew I wanted to support at least wide and full aligned content - much like WordPress, so I borrowed their .alignfull and .alignwide class names and added support for them on this view.
Now here is the real challenge! I wanted a feature rich editor to run on the frontend of my site, and it turned out I was able to make an editor that has the potential to work for anyone with an indieweb site thanks to microformats.
The editor looks for the microformats .p-name and .e-content classes, and injects itself into those elements.
You can load the editor on you own site and uses the styles of your website
If you start a paragraph with ### and a space it will turn that block into a h3, if you start with a > you get a blockquote, etc.
![\"\"](\"https://grant.codes/media/2019/01/13/markdown-shortcuts.gif\")
The editor has a fairly loose idea of blocks. They can be added using a / in a empty paragraph or some are automatically made when you drop a file into the editor. At the moment I have kept them fairly simple:
![\"\"](\"https://grant.codes/media/2019/01/13/oembed-block-1.gif\")
Blocks can be wide or full aligned (if you have the right css styles)
![\"\"](\"https://grant.codes/media/2019/01/13/alignment.gif\")
You can @mention IndieWeb people. Currently it is only people from the IndieWeb Directory, but in the future I'd like to make it work with users personal nickname caches.
![\"\"](\"https://grant.codes/media/2019/01/13/mentions.gif\")
I've enabled a decent set of other micropub properties in the sidebar.
Although the PostrChild extension is fairly usable right now, I think it is a long way from complete, I've had a bunch of ideas I'd like to at least look into: