Skip To Content

Dev

Experimenting With Google’s Deepdream Project on OS X

I have been experimenting with Google’s deepdream project in the last few days. Since I started posting images around (most prominently this collection of dreamscapes) people have been asking: how can I make my own? This short collection of notes represents an early attempt to gather up enough information for technically-minded people on Mac OS X to start dreaming.

A Few Notes About Medium’s Typographic Manifesto

Marcin Wichary has a fantastic series of posts documenting Medium’s commitment to beautiful web typography. Apart from being intrigued about some of the little tricks they use to enforce better typing habits, like disallowing users from entering two spaces in a row, I was also interested to read the technical supplement for designers and developers. It reminded me of a few things I’ve been meaning to add to my main theme and introduced several things I hadn’t really thought about.

Roll Your Own SVG Sprite Sheets With Bower and Gulp

In this article I will show you how to integrate a custom set of open source icons into a project using Bower (a front-end package manager) and Gulp (a command line task runner). This isn’t exactly the sort of tutorial where you can copy and paste a bunch of code and get up and running—it is more a collection of working notes and scraps of code meant to point you in the right direction. I will assume readers have a basic understanding of modern front-end development tools and the command line. I happen to be using WordPress and PHP to implement the markup but also include some vanilla JavaScript that could be adapted for use pretty much anywhere.

Getting up to Speed With Responsive Images and Picturefill

This week I have challenged myself to get up to speed with responsive images and Picturefill, a polyfill for the upcoming HTML5 picture element as well as two new attributes for the img element. It wasn’t easy—there’s a surprising amount of reading and processing that needs to be done to understand the many problems and proposed solutions to responsive images on the web. Along the way I realized that I am not yet hugely interested in the art direction use case—which means I have focused more of my time on two less hyped img element attributes, srcset and sizes. Together these provide for most of what I am interested in: swapping source imagery at different resolutions.

Two Simple Chinese Language Functions for Bilingual WordPress Blogs

When I started using Chinese characters on this blog I quickly ran into several issues:

  1. WordPress incorporates actual Chinese characters into permalinks e.g. the slug for a post titled ‘Wuchang temple 武昌宮’ will be https://synapticism.com/wuchang-temple-武昌宮. This works well enough but isn’t great if you prefer URLs that are easy to remember and type.
  2. Pinyin tone markings aren’t available in most fonts. If you use pinyin in post titles your content will typically end up looking rather ugly, both on your blog (if you aren’t using a header font with the requisite characters) and on the rest of the web (whenever your content is shared).

In WordPress there are all kinds of different ways to approach problems like these. I am generally interested in a parsimonious solution that doesn’t involve a plugin or a lot of extra code. I’ll readily sacrifice perfection for “good enough”. Here’s what I came up with…

Markdown in WordPress

Markdown is an awesome shorthand system to format text on the web. I have been using it for slightly more than a year now and absolutely love it. Peruse the syntax and you’ll see why—it’s easy to pick up and builds on many existing patterns of usage.

Using Markdown with WordPress is fairly straight-forward. You’ll need a plugin, of course, and there are many to choose from, as always. I currently use JP Markdown, a repackaging of the Markdown module from Jetpack, Automattic’s sprawling mega-plugin, which I am otherwise not interested in using.

WordPress Theme Development With Gulp, Bower, and Sass

February 2015 Update: this post is now way out of date as the starter kit has evolved. I’m working on a new post to explain all the developments; in the meantime please check out the original repo on GitHub.

September 2017 Update: don’t spend any time reading this post; it’s essentially obsolete at this point. I’ll try and find some time to update this as a lot has changed since it was first written.

WordPress theme development is remarkably more efficient with Gulp, a Node-based build system and task runner similar to Grunt. Gulp has been widely hyped in recent times—and no wonder, it’s a major time-saver. I found out about Gulp by way of this excellent introduction by Mark Goodyear, later adapting the build script in this post by Matt Banks for my own use.

Since then I have refined my workflow to the point where I figure it might be helpful for me to share my approach with the WordPress community. With this in mind I have prepared this starter kit (with source code on GitHub) to demonstrate how you can use Gulp with Bower and Sass to optimize your WordPress theme development workflow. This starter kit does not contain any actual WordPress theme files—it is meant to act as the scaffolding that surrounds your theme and supports your workflow.

Rendering Pinyin Tone Marks With Google Web Fonts

Recently I noticed that pinyin tone marks weren’t rendering properly on my personal blog. The requisite characters did not appear to be included in the Google web font that I was using at the time. As such, my browser was falling back to whatever font listed in my font stack happened to contain that character. The result was a bit of a jumble, not something especially noticeable, but certainly of concern to anyone interested in web typography and Chinese language blogging.

Goodbye Jetpack

Jetpack is a plugin suite that brings WordPress.com functionality to self-hosted WordPress blogs. I have been using it ever since Matt Wiebe, author of Markdown on Save Improved, retired the plugin by integrating it into Jetpack. This isn’t the only plugin that has been assimilated, Borg-like, but it is the only one I have any interest in using.

Even so, I tried out most of Jetpack’s features, hoping to like at least some of them. After all, since Jetpack is actively developed and maintained by Automattic there is less of a need to vet each module as I would usually do with plugins by unknown authors. I was also curious about what sort of functionality would be included in such a super-plugin—perhaps there would be something useful in there that I hadn’t seen any need for before.