Gerard Condon's Blog

Journal of a software developer.

Sublime Text Vintage Mode

I started learning Vim recently and it works fantastically well on Linux. Windows is a bit of a mess though and I’m not confident of getting plugins working correctly. Maybe the new Linux subsystem for Windows will help this.

In the meantime I’ve enabled vintage mode on Sublime Text and it seems to be working well. The main thing it gives me is the keyboard navigation keys. Not having to use the mouse or arrow keys is a big win. I never realised how good it would be until I tried it.

References: Sublime Text Docs, King Luddite Blog Post

Converting Yaml to JSON in JavaScript

I use the Middleman data files feature for my chess site. These files are written in yaml. I could have used json directly for these which would have removed the need for this post but I find yaml is easier for manual editing - with json you constantly have to worry about matching up brackets. From the Middleman erb files, when I build locally I am able to access things like data.fide.ratings. However I would like to be able to load this data remotely and process it from my javascript code.

To load the remote file I just use the JQuery Ajax get function and pass it the url of the file that I want. Then I use the js-yaml library to parse the result and create a data json object from this. Now from my JavaScript code I am able to access the same data using the same notation.

1
2
3
4
5
6
function loadYamlFromUrl() {
    $.get( "https://raw.githubusercontent.com/gerardcondon/chess/master/website/data/ratings.yaml", function( data ) {
        var data = jsyaml.load(data);
        // can now access data.fide etc
    });
}

This has worked well for me and for any data file that I was able to access via Middleman, I can now access the same data from JavaScript in the same format.

Adding Sidebar Links to Local Gitbooks

I’ve started keeping track of various notes in markdown format and I wanted to use Gitbook to group them together. I’m using the npm module to build it locally. It’s a useful tool and theThe completed book looks nice. However I would like to add some customisations e.g. links back to my main page.

It’s not easy to add simple customisations. Or more like it probably is but it’s not well documented how to do so. Editing the header is a bit awkward as you have to modify the theme yourself. I’ll probably end up just adding a header above it using an iframe.

One thing I did find out how to do was to add links to the sidebar. You edit the book.json to add a links section like this

book.json
1
2
3
4
5
6
7
8
  {
    "links": {
      "sidebar": {
        "Gerard Condon": "http://www.gerardcondon.com",
        "Github": "https://github.com/gerardcondon/tools-docs"
      }
    }
  }

State of Apple ⇒

This is a really good round up of Apple links from Michael Tsai. I just found Steve Blank’s post on Tim Cook as Steve Ballmer a couple of weeks ago and since then there’s been a few more posts on where Apple is going.

I’ve bought a fair few Apple products over the last 10 years but I’m not sure when I’ll buy one again. The phones are admittedly excellent but I get 80% of the experience on my cheap Android phablet for a quarter of the price. Also it’s really the hardware and local software experience with the phones that are good. Any Apple service has tended to be terrible e.g. iCloud - especially compared to Google’s services on Android.

Also iTunes has always been a disaster. And now their laptops seem to be becoming glorified toys - any port I used has been removed. They have a fascination with thinness but I’d trade a few mm for battery life. I’m not sure what I’d do with one now over a Chromebook - especially given that Chromebooks are about a quarter of the price and soon you’ll be able to use Android apps on them.

They never really did much with the Apple TV. I have an older model and it sits unused under the tv now. The remote for that was terrible - looks over usability. Given the way the app store took off on iOS, I thought they had an opportunity to push it as a gaming box. However that never happened. I think gaming seems to be a real blind spot at Apple and it never got the attention that music or movies got. It’s a shame really.

My first iBook got me into the Mac ecosystem and the halo effect lead to more purchases but recent hardware updates (or lack of it on the desktop) are pushing me out again. It’s more likely that Google has the halo effect now and that I’ll be switching to their ecosystem completely.

  posted on   •   Apple

Samsung Chromebook Plus ⇒

Google and Samsung announced some new Chromebooks which will be able to run Android apps. These look fantastic, especially for the price. On my current Macbook Air, I basically spend the majority of my time in the browser anyway so moving to a Chromebook wouldn’t be that much of a big deal.

Adding Microposts to Middleman

I came across the idea of microblogs from Manton Reece’s blog. The idea is that instead of just using the blog for long content, you can post short Tweet like items there also. Needless to say you can just use Twitter for this but it’s more fun to do something unneccessarily complicated! I have form here - like using Octopress for a blog instead of WordPress.

Basically, instead of using Twitter to publish short notifications, you can post them to your own site and if necessary to the likes of Twitter from there. Having control of your own content gives you independence from third party sites - if Twitter shut down tomorrow then my posts would still be available here. If I’m putting content on the web then ideally I would like it to be on my site under my own domain name. I’ve decided to add them first to my chess site and then if they work out there, try to port them to Octopress.

That blog is written using Middleman, which has the ability to use data files. Any yaml file in the data folder is available to the Middleman app using a data.filename.foo like syntax. This means that I can create a yaml file containing the microblog posts and then use that to generate the appropriate html pages.

I have a microposts.yml file with each entry having text and date entries. This is sufficient for the moment but also yaml is flexible enough that I can add more attributes later.

microposts.yml
1
2
3
4
- text: here is another post
  date: 2016-11-19
- text: here is a post
  date: 2016-11-20

I use the Middleman blog extension to generate the blog portion of the site. I want to keep using this as it handles rss, tags, archive pages, pagination etc. It works by generating posts from files in a source folder. In order to integrate with this, I want to generate a file per micropost in the correct location. Under the source folder I split out my posts into two folders manual and automated. I updated the regex in config.rb to handle this blog.sources = "posts/{type}/{year}-{month}-{day}-{title}.html". Middleman will process these equally but now I can check what type the post is by using data["type"].

In the config.rb I delete the contents of the automated folder on each build. I tried using before_build hooks but they were being called too late - the Middleman data structures were already created with the previous contents of the automated folder. This lead to build errors and issues with sitemaps etc. So I just perform the File operations directly in the config.rb. This ensurs that they are executed before the blog extension processes the posts folder. Then I iterate through the micropost data from the yaml file and create the appropriate file in the automated folder.

config.rb# Clear out automated posts folder
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
automated_posts_folder = "#{config[:source]}/posts/automated"
FileUtils.rmtree(automated_posts_folder)
FileUtils.mkdir(automated_posts_folder)

post_counter = 1
data.microposts.each do |micropost|
  post_content = "---\n"
  post_content += "title: mp#{post_counter}\n"
  post_content += "date: #{micropost.date}\n"
  post_content += "tags: microposts\n"
  post_content += "micropost: true\n"
  post_content += "---\n"
  post_content += "#{micropost.text}"

  File.write("#{automated_posts_folder}/#{micropost.date}-mp#{post_counter}.html.md", post_content)
  post_counter += 1
end

I’ve added micropost: true metadata to each of my generated files so that I can check if the post is a micropost using if data["micropost"]. This allows me to customize how I display these posts - in particular I don’t show a title for these posts.

Speaking of titles, some special handling is required for these as the Middleman blog extension uses these for the generated html file names. I added an attribute display_title to the BlogArticle class which will return an empty string if the post is a micropost. This allows me to specify a fake title for each micropost using an incrementing ID counter. The blog extension can use this fake title as normal but it will never be seen by the viewer of the blog. Instead anywhere that a title is required in html markup I can change it to use the display_title attribute. The fact that Ruby has open classes makes adding this very easy - I can do it in the config.rb file and don’t need to go mucking about in the Blog extension code.

config.rb
1
2
3
4
5
6
7
8
9
module Middleman
  module Blog
    module BlogArticle
      def display_title
        data["micropost"] ? "" : data["title"]
      end
    end
  end
end

This means that I can display these microposts just using the main text and not displaying a title. They interleave nicely with longer form blog posts.

Using the Middleman Blog Extension means that I also get RSS integration for these posts. I edited the xml templates to remove the title if the post is a micropost. Now in my RSS reader, they show up with the body text as the title instead of the fake title needed to make the extension work.

This current implementation is basic enough and I have a few ideas of how to improve it in future.

  • I like the idea of the static site but the editing part is not particularly nice and is a bit of a barrier to posting. I would like to use something like Contentful so that I can add posts without having to open a dev environment.
  • Once you have something like Contentful, then the next step would be to use that to trigger automatic builds once a new post is added. This would mean that the site is always updated and assuming Contentful works well from Android, would allow me to make these microposts from my phone.
  • I could use IFTTT to cross post the microposts to Twitter - however I would have to deal with the 140 character limit there. I would also like to automatically post a notification to Twitter when I put up a normal blog post.
  • Currently everything is going into the same RSS feed. I would like to add separate RSS feeds e.g. micropost only, normal post only. I think this would also help with using IFTTT to post to Twitter.
  • One nice consequence of using the Middleman data files is that there is a much better separation of content from markup. I would like to expand this to also apply to full blog posts. Ideally everything content related would come from the data files. Then I have more options as to how to generate those data files e.g. Contentful for the tweets or a Rails app for the pgn files.

Fixing Octopress 2.0 to Work With JQuery

After updating the site to add JQuery, I noticed that the Github aside and the sidebar toggle no longer worked.

Opening up the console I saw the following errors

TypeError: Object 0 has no method ‘charAt’

and for the Github plugin

`Method JSONP is not allowed by Access-Control-Allow-Methods`

Googling for these lead me to Daniel Hilgarth’s blog where he has two posts on how to solve the charAt and jsonp issues.

  posted on   •  

Fixing Twitter Sidebar for Octopress 2.x

I noticed recently that the Octopress Twitter plugin for my sidebar was broken. The reason is that Twitter no longer supports the APIs that the plugin accesses. Instead now they have a widget page to generate html code that will embed a list of your tweets on your page.

I created a widget for myself and customised it by adding the nofooter transparent noheader attributes to data-chrome. These remove various headings and background colouring so that it blends in with the site a bit more.

To add this to an Octopress site, you replace the code in source/_includes/asides/twitter.html with this new code. I also added a follow button which displays a Twitter formatted follow button and a count of your subscribers.

The full code is as follows

source/_includes/asides/twitter.html
1
2
3
4
5
6
7

<section>
  <h1>Latest Tweets</h1>
  <a class="twitter-timeline" data-chrome="nofooter transparent noheader" data-tweet-limit="5" href="https://twitter.com/gercondon">Tweets by gercondon</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
  <a class="twitter-follow-button" href="https://twitter.com/gercondon">Follow @gercondon</a>
</section>