Thoughts of a Serial Tinkerer

  • Hekyll: Impressive Presentations with Markdown

    Posted on 07 Feb 2012.

    I am a big fan of Jekyll, a static blog generator developed by one of those smart guys behind GitHub, Tom Preston-Werner. I love being able to write posts in Markdown and being able to version my entire site in a Git repository.

    In the past year or so, I have been using Prezi.com to create a number of the presentations that I’ve given at various camps and conferences. Prezi is great, but it’s Flash-based and authoring within their tool is not the easiest process, and there’s no way to version a talk. A few of my recent talks have been with my friend and co-worker, Steven Merrill, and then he has gone on to improve the talks and give them at a few other events that I wasn’t able to attend. Once or twice, he forgot to ‘clone’ the presentation in Prezi before making changes, so we accidentally lost a copy of the presentation we originally gave and now only have the updated one. Not desirable.

    New to the budding JavaScript-based presentation software is Impress.js, which is actually a really great analog for Prezi, done entirely in HTML, CSS, and JavaScript, which is awesome.

    One day at work, Steven and I were discussing getting started on our presentation for our upcoming talk at Drupalcon Denver 2012, and we thought, “Hey, wouldn’t it be awesome if we could write our presentation in Markdown and have an Impress.js-powered presentation? We could use Jekyll!” So, I took my lunch break and whipped out a prototype which I dubbed “Hekyll” (pronounced heckle). And thus my new presentation engine side-project was born.

    The idea for Hekyll is pretty simple: turn Markdown text files into a nice looking presentation. In the YAML front-matter for each slide (just like in each post in Jekyll), you can add attributes which can let you control all of the layout options provided by Impress.js, which includes position, scale and 3D rotations for your slides. Or, if you just need to get a presentation done quickly, there’s a “simple slideshow” configuration option for Hekyll that will just do simple cross-fades between your slides for you. But wait! There’s more! Hekyll comes with a decent set of default styles and also has a print page which will let you easily print each slide to a single page.

    That’s it for now. I’ve been pondering a way to make easy themes for slides so that there can be a handful of presentation styles to get people started – it’s really just as simple as writing some CSS.

    Wanna see Hekyll in action? Check out the documentation demo!

    I’d love to hear your thoughts and feedback on the project. Get invovled if you’d like, we’re maintaining the project on GitHub.

  • Selecting text with JavaScript

    Posted on 27 Oct 2011.

    Today I was working on a small tool to take some text that a user selects and copy it into a textarea to store ‘notes.’

    While I was researching how to do all of that, I figured out how to select arbitrary text on the page and highlight it, as though the user had dragged her cursor and selected it, using JavaScript.

    The following snippet uses some jQuery to select an element, but it could just as easily be written without it.

    <script type="text/javascript">
  var rng = document.createRange($('p').get(0));
  rng.selectNode($('p').get(0));
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(rng);
</script>

  • Accessibility and the Mobile Web

    Posted on 20 Feb 2007.

    The mobile web is still pretty new. There are a lot of different browsers and not a lot of standardization across them. It’s something like the browser wars of Netscape v. Internet Explorer from 10 years ago. Only on steroids.

    I’m no stranger to dealing with cross-browser compatibility, but when you start talking about supporting mobile browsers, support just gets insane. Pocket IE renders completely different than Opera Mini and both render completely different than a phone’s built-in browser, and then different phones have different built-in browsers. And none of them are specifically target-able, like IE for the desktop is (similar to how we cannot really target IE/Mac).

    Even worse is lackadaisical support for the handheld media type for CSS. Pocket IE uses both the Screen and Handheld types, but defaults to Screen, whereas some devices like Blackberry’s just pretend to be desktop computers but their browsers hardly support anything. It’s really quite aggravating.

    And then we get into the actual accessibility of the browsers, or rather, lack thereof. Opera Mini doesn’t support accesskey declarations. This isn’t a huge problem, but when you consider how long some websites can become when forced to only be 176 pixels wide, losing the ability to just hit a key on the phone and skip past parts of the content sucks. Of course, that also assumes that named anchor links work, which some browsers (Opera Mini I’m looking at you again) don’t support.

    The only hope we have is for people to create logical, semantic websites that degrade well.

    Hopefully the next few years will show some sort of standardization occurring across the myriad mobile phones and browsers in how they interpret and interact with the web. Mobile web is still in its infancy, but it will grow up quickly.