My previous avatar was almost 3 years old, and I was getting tired of it. I decided to replace my avatar on my website for my IndieWebCamp Austin hack day project. But if you know me, you know I can't do anything the easy way. For my hack day project I made the avatar on each post in my website change depending on the emoji I use in the post!
I've had a page on my website for a while now that shows all the emoji I use in my posts. It's sorted by most frequently used emoji.
If you click on an emoji, you can see all the posts that include that emoji, kind of like a tag. This has been pretty fun, but I wanted to take it one step further.
Before I left for Austin, I did a little photo shoot at home. I took pictures of myself making a bunch of faces, and even with a few different props like a mug of beer, eating a pizza, holding an umbrella, etc. I added all these pictures to my admin interface and mapped them to the emoji I frequently use.
(There's a bunch more, but I'll leave that to you to find them!) And now, whenever a post includes an emoji, it will swap the photo that's used as the avatar! Here are a few highlights.
I'm looking forward to being surprised when I forget this exists and randomly use an emoji in a post and see a different photo!
If you'd like to see the video of my demo of this feature, and the rest of the demos at IndieWebCamp, you can watch them here!
I had a great time at IndieWebCamp Austin this weekend! Thanks to everyone for joining us this weekend, and special thanks to Manton for organizing!
My month permalinks have shown a calendar grid of all the posts I made during that month for a while, but it's not particularly easy to skim that and actually understand anything from it.
I had recently added a summary of my modes of transport for the month, which is a fun way to see how much I bike in a month compared to how much I'm in airplanes.
Today I added a few new sections below the calendar.
First is a list of all the photos I've posted that month. They are displayed in the same style as my photo albums, which are full-width justified, uniform height. It's a neat trick I learned from Flickr, and provides a nice looking photo grid of uniform height without cropping any images.
The next section shows a map view of all my checkins for that month. I didn't want to show a pin for every checkin, since that would be too many pins on the map clustered too close together. So instead I started by grouping by city name. That works pretty well when I travel to a few different cities in the month.
The problem with that approach is if I don't leave Portland for a whole month (it rarely happens these days but still), then the map looks like I didn't even leave a single spot. So instead, I actually group by latitude and longitude rounded to the nearest 0.1 decimal.
That way when I don't leave Portland, at least it shows a few map pins around the city.
I should probably switch this to use an actual map pin clustering algorithm, but this was easy and is good enough.
Below that is a section that shows a list of my "popular posts". I decided to rank my posts based on the number of interactions they've received. Replies are weighted the highest, followed by reposts then likes. So if something gets 10 replies, it will beat out a post with only 1 repost. I chose these weightings pretty arbitrarily, spot-checking a few months of data at a time. We'll see how I feel about it after some time.
So I'm pretty excited to launch this! Thankfully I already had enough things indexed in my database that it didn't require a lot of backend changes, it was mostly just UI and design work. We'll see how this feels for a few months and maybe there will be more things I want to add to it later, but this feels like a good start!
Thanks to cleverdevil for the inspiration!
For the past week or so, I've been getting a series of Pingbacks from a spam blog that reposts a blog post a couple times a day as a new post each time. It's up to about 220 copies of the post, each one having sent me a Pingback, and each one showing up in my reader as a notification, which also causes it to be sent to my phone.
Since I use webmention.io to handle my incoming Webmentions (and Pingbacks), this would be the best place to block the site, rather than filtering it out in my reader or my website.
Webmention.io previously had no way to actually completely block a domain. As Webmentions have started growing in popularity, it's become obvious that we need more tools to combat spam and abuse. While this site was actually sending me Pingbacks, the same applies to Webmentions.
Today I added a new feature to webmention.io to allow people to entirely block a domain, and delete any webmentions received from that domain.
From the dashboard, you can click the "X" on any recent webmention, or you can paste a URL from one you've received in the past. You'll be taken to this screen where you can either delete just the one webmention, or entirely block the domain.
Once you've blocked the domain, it will show up in your blocklists page!
I hope this helps others keep out spam as well! I'm sure looking forward to never seeing that notification on my phone again!
XRay, the library that I use to parse URLs to show comments, now supports parsing direct Microformats JSON, ActivityStreams 2.0, as well as finding a
rel=alternate link and parsing data from that instead!
This means I now get great results when parsing Mastodon or other ActivityPub links, and this is also the first step in what I hope will result in fixing the Microformats situation for WordPress, since a WordPress plugin will be able to generate Microformats JSON and advertise that in a
Next up is updating Aperture to take advantage of these new features!
This will allow me to use my bookmarks page more like https://adactio.com/links
Create a page
/nearby that finds the viewer's current location and shows posts near that location
Just implemented mp-destination on my site! I can connect multiple Micropub or Twitter accounts to my site to be able to post to other accounts from Micropub clients when I'm logged in as me. This is the first step of turning Monocle into more of a Tweetdeck-like experience!
I just finished my IndieWebCamp hack day project, and I'm pretty excited about it!
A long time ago, my website used to have this 7x7 grid of pixels on the home page, which visitors could toggle between blue and green. It saved the state after you'd click them, so you could leave little pictures for the rest of my website visitors.
I eventually abandoned that version of my site, and that feature disappeared as well. I decided that it would be fun to add it back to my current website today!
So now, my home page has a similar section at the top with a little grid of pixels again!
There were a few differences in my approach this time around. I decided to make the grid 20 pixels wide by 3 pixels tall, in order to reduce the chances of people being able to spell things or draw anything inappropriate.
I wanted the grid to be responsive as well, so that the cells shrink appropriately when the width of the column shrinks. I found this nice answer on StackOverflow, "Grid of Responsive Squares", which pointed me at a technique I hadn't know about, which is to use a percentage for the padding-bottom property. Each cell in my grid is
calc(5% - 1px) wide, with
padding-bottom: calc(5% - 1px) as well. This makes the height match the width, which is based on the relative size of the container.
I also made the grid realtime! If you open the home page in two browsers, you'll see one browser update when you click a pixel in the other! I was able to do this without any complicated server-side support thanks to the nginx push-stream module that I already have installed. It lets a browser subscribe to an endpoint using the EventSource API, and then from my server I can send a POST request to the nginx module to broadcast data to anyone listening.
Maybe my next project will be to get some Neopixels and make a little thing for my desk that always shows the current pattern!