Two Dads Talking, Episode 1: The Kids' Funk

In the premiere episode, Jonathan and Eddie embark on an epic journey of talking. Along the way they discuss themselves and their families, salivate over new iPad Pros, attempting to sleep a full night despite being fathers, getting derailed talking about their pets and how they influence their families, and finally why they don’t want to give Google information on their website visitors.

My newwwyear 2019 goals

I took a look at my IndieWeb goals and made a list of the things I want to have live on my website by January 1, 2019.

Webmentions

I used to display webmentions my posts received on the previous Jekyll incarnation of my website, but now that I've shifted my website to being dynamically rendered, I haven't rebuilt the webmention display code. I'd like to finish that.

I want to import all existing webmentions I've received to date and store them as JSON files in my post storage folders alongside my posts.

I also want to make sure that whenever my site receives a webmention that I immediately add that new webmention to the JSON files in my post storage folders.

Adding weather effects

It's only November and Maryland already has snow in the forecast for the next 24 hours! The last couple of weeks I worked on a new feature that has been enabled on my website today. Every 20 minutes my location and the weather at my current location is saved locally on my server. My website is then able to utilize my location and weather information throughout my website.

The first feature using this information are weather effects. Initially, I'm just starting by darkening the website background and adding snow falling if my current location's weather is said to be snowing. It looks like the image below!

I am able to do this because my iPhone logs it's current location to my own instance of a server running the Compass software. My website retrieves that location and uses it to query the Dark Sky API and save that information to my server.

I currently restrict the weather effects to the homepage, although since individual posts also contain weather data from when the post was made, it's not outside the realm of possibility that I could have posts that I make during snow could have this snow effect on the post's page. A fun little way to prepare my website for the winter!

I’ve been trying to figure out what to do about either getting an iPad or a Mac because of the iPad’s software limitations... I think i just figured out the solution..... I just might be broke after...

Added updated date

So far my website has only ever had published dates, however today that changes. I don’t often update posts so it hasn’t been a high priority for me. However, I do have several pages where I maintain content (My about, now, using and indieweb pages). Until now I’ve just manually typed in the month year that I last updated those pages. Today I added support for having an updated date within the actual post object where it can sit beside the published date and be picked up using microformats.

Today, I ported my code that handles the highlighting and display of my code snippets to apply to code blocks within articles that I write on my site. What's the difference, you ask? Code Snippets are long segments of code that are either an entire code file or a large segment of a code file. Code Blocks are short pieces that are displayed inside of articles that are meant as tutorials or coding tips.

Regardless of if you are viewing a full code file or a short code block in a tutorial, you always want code to look the same. Syntax highlighting, monospaced and containing line numbers. I also tagged all the articles that had code blocks with a code-examples tag. This allows you to see a stream of all the articles that have code blocks.

I'm pretty excited to have rolled this out. The way it works is when I am writing a blog post in markdown, I can use the same syntax as GitHub supports (three backticks and the language name)

Here is an example:

```javascript

Then you can write code examples in here and they will get syntax highlighting... wait, is this code-block-inception?

```

It's nice to be able to write a regular article and then quickly and easily add code examples using a familiar markdown syntax.

The other thing I'm thinking about is about CodePen style code collections, where you can have multiple code files and also display what they look like. In the IndieWeb, we've already determined a collection is just a post that contains child posts. So I could have a post with the title of the "CodePen" and a description, then within the code collection, include child posts that are all Code Snippets.

That would be the first step, the second step would then be recognizing code collections and not only displaying the source code but allowing the person viewing it to "view it live". I read up today about how websites like CodePen do it and it seems pretty simple, mostly just involving injecting the source code into an iframe. But that's another adventure for another day.

When Jekyll rebuilt on my web server, once a day my server would be unavailable for a period of time, from 30 min to multiple hours. Now I have turned off Jekyll because my entire site has been replaced with it’s new dynamic rendering engine my server hasn’t become unavailable once 🙌 such a relief!

Owning my code snippets

In the software world, it is very common to take snippets of code that you want to show or discuss with people and post it on GitHub as a Gist, which is a public link that shows code with line numbers and syntax highlighting for the language used.

Today, I am excited to add the same functionality to my own site. Using the Code Snippet interface of Quill, I am able to create a snippet on my own website, that gets line numbers and syntax highlighting. You can see the first, test snippet in JavaScript here. I also wanted to get more functionality like GitHub, so I added the ability to highlight lines on the page to help with conversational context. If you click on the line while looking at a code snippet, it will automatically highlight the line and add a code line fragment to the url hash (for example: #L3 or #L1,L4 or #L3-L5). You'll notice the example includes both a single line, multiple non-contiguous lines or a line range. In fact, it will even support multiple non-contiguous ranges. What is better is that when the page loads, it will read the url fragment and auto-highlight the respective lines.

This means I can post a code snippet, select some specific lines and then share the resulting url with fragment to someone and the code snippet will automatically highlight the specific lines to them. Also, the possibility exists that someone could include a code line fragment in the url when sending a webmention to my code snippet and like media fragment, I would then be able to consume the code line fragment and associate the webmention with the specific code snippet lines.

One more step towards owning my own data AND replacing GitHub functionality through distributed means.

7 years ago today was my last day working at Apple stores. I don’t miss certain parts of the stress and I love spending all of my time programming but there was something amazing about working at Apple Retail.

Really happy to have my database cache auto-updating bugs fixed so that my posts are now instantly indexed in my website 🙂 Now if I can just switch my TV Show and Movie "watch" posts to use Micropub, because all of this logic is tied to my Micropub endpoint and the way I currently log tv shows and movies circumvents my Micropub endpoint. 🤦‍♂️

They came to the conclusion that there are four groups of people that you want to treat their responses differently:

Accepted / Immediate Connections

2nd level connections

Everyone

Mute or Blocked

Accepted / Immediate Connections

These are essentially your friends on Facebook or your follow list on Twitter. These are people that you have chosen to connect with in some way and this logical conclusions can be drawn around the level of interactions you're willing to have.

My plan is to display these responses completely (name, photo and content of response). This list will be generated for me by adding anyone I follow, as well as anyone I have sent a reply to. This will NOT add people to whom I have liked, emoji reacted, quoted, or bookmarked. Those are lower level responses that do not indicate a deeper level of a desire to connect with that person.

2nd Level Connections

These are "friends of friends". You can assume they won't do anything TOO bad, but you might not want them posting all over your site. There is a deeper level of trust here because of mutual connection but still some care should be taken. This can be determined through different ways. One way that has been brainstormed in the IndieWeb is Vouch.

I don't currently track 2nd level connections but I liked how Tantek thought this through, so my plan is for replies to display their photo and name as "other people that have responded to this post", but not display the content of their reply. I also think if they send a like, emoji reaction or quote, I'll display it just like I would an Immediate Connection.

Everyone

This is the World Wide Web, and anyone could send anything to my website via webmention. So this is a category you likely want to moderate.

My initial thought is I will accept likes, quotes and emoji reactions from them but I won't list attribution of who did it while moderated, just the reaction itself. For replies I am considering potentially listing the url of the author of the post under "other people who have replied" but no name, photo or content while moderated.

Mute or Blocked

These are people who you do not trust for whatever reasons have happened for you. You don't want to associate with them in any way.

Responses are not displayed from these people and they are not listed in the moderation queue.

Some thoughts on moderation

This means I'll need a moderation queue. Anything from a 2nd level connection or from the Everyone group will enter the moderation queue. Responses from 2nd level connections should appear higher in the queue than responses from the Everyone group. From there I can choose to:

approve a response (display it like an immediate connection)

approve response and accept author (makes this author an immediate connection so they aren't moderated anymore)

My New Articles Archive

So as I mentioned earlier today, I've added a database that keeps a searchable cache of my posts in my website so I don't have to open hundreds of files in order to build the various pages of my website. It's allowed me to move almost all of my pages off of Jekyll and later this month I'll be removing Jekyll from even being on my server.

The database as made a lot of things easier, one is that it is now quick and easy for me to create feeds of posts. Right now I have two types of feeds, tag feeds and channel feeds. Tag feeds show all the posts I have created with a given tag.

Channels

Channel feeds are a bit different, I have two types of Channels: static and dynamic.

A static channel isn't too much different than a tag, when I create a post I either manually add the channel to the post or I have a preset rule inside my server that attached the channel to the post. The key to a static channel is that it just shows all the posts that have been assigned to it.

The dynamic channels are really where its at. Dynamic channels allow me to provide an id (which becomes the url that you use to access it), a name (which displays at the top), a layout (currently I have 3 types of layouts: Cards, Gallery and Archives) and finally a "query". The query is where the magic is, this is essentially a set of properties that will be passed into the database query. That means I can dynamically, without writing any code (just a config file) create a new page providing it's url, name, layout and some requirements around what type of information I want to display.

Articles Archives

One thing my new channels has allowed me to do is to create the Archives layout and set up a query that fetches all the articles I've written and display them in a list. It was super easy to set this up because of the way my database cache is working and the way I've configured my channels.

I group them by year, then by month and display each article on it's own line. I really like how it turned out. I was heavily influenced by Manu Moreale and the article archive they display on their site. I imagine mine will grow more into it's own design and style over time but everything starts somewhere and I like starting mine based on Manu's work (Thanks for the inspiration!).

Just flipped the switch and now main feeds on my website are powered by my new database cache and my js server. 🤞 Hopefully nothing breaks! Now every feed page should have a JSONFeed, by adding feed.json even tag pages (ex Apple tag page has a JSONFeed)

Hmmm, such tough decisions... the iPad Pro and Mac Laptops are so similar in price. I love iPads, and I think the new Apple Pencil and Keyboard Folio will make that experience only more enjoyable. However, I do occasionally find issues with the iOS software for web development and currently you can't do any iOS development. Xcode for iPad would definitely change the game, but I don't think choosing an iPad over a Mac by guessing there will be an Xcode for iPad at WWDC 2019 (although being able to charge your iPhone from the new iPad Pro seems a pretty obvious sign that Xcode for iPad could be around the corner).

I'm excited to add dark mode support to my site for those running the Safari Tech Preview. The only issue is half of my website are still some static pages generated by Jekyll so I need to switch those to be powered by my dynamic section of my website to give the full thing.