Markdown => Tutorial in 1 Step

When I wrote my Ruby Readline tutorial I felt I came up with a cool concept. I started with a Markdown file, translated it to html, and I used the headers to generate a Table of Contents on the fly.

table of contents

It didn’t take me long to realize that I could turn this into a framework where I could turn any Markdown file into a tutorial exactly like this one. So with surprisingly little work I modified the scripts to work with any markdown file and the html automatically generated from the standard Markdown.pl script.

I called this markdownorial. Laugh all you want at the name, but I still think the concept is very cool. I’ll probably be using this more and more to automatically generate and format a pretty cool looking tutorial from a single markdown file. The start to finish time for a project like this has instantly dropped to just the raw content part, no design or coding needed!

Advantages include:

  • Writing Markdown is very fast and efficient.

  • Time is spent writing the content. Not messing with design,

  • Table of Contents is automatically built for you.

  • Useful permalinks are automatically generated. Very useful when passing around links.

  • Clean user interface that focuses entirely on the content but the Table of Contents is always available!

  • Git Repository means if I update the design its just a `git pull` away to get the update.

Right now the tutorials shows up elegantly in all standards compliant browsers. Safari/Webkit and Chrome display it perfectly. Opera has some very minor Unicode issues but displays everything perfectly. Firefox has some separate Unicode issues and if you don’t have the latest version it has some working but slow animation. Overall, its entirely usable for people using decent browsers.

Let me know what you think. Feel free to use it and improve it. Its all up on Github.

Favorite Quotes (Alpha Release)

Much like my ~/bin page that keeps track of shell scripts I’ve written I took the time to make a small site to host my favorite quotes. Again, this lets me experiment with some things. This is an alpha version showing some progress. Its just 2 hours of PHP, a text file backend, some CSS, and a bunch of minute JS animation. But its a neat site that I hope can become useful to me:

quotes

Some semi-novel concepts are that when you scroll 75% down the page the next 10 quotes are automatically loaded and added to the DOM in the background. This way you can continuously scroll forever and load quotes without ever noticing! Well, unfortunately you can’t quite test that yet, because there are only 10 quotes, and 75% is not perfect, it should really have a fixed size from the bottom. Minor details!

Also, this project allowed my to test my new auto-project-setup shell script. It worked great. it got me up and running in a matter of seconds!

BogoJoker Initial – Blog Redesign

About a week ago I decided I wanted to do something new and exciting. After some thought I figured I would take a go at upgrading my blog’s design. All in all I invest three days into the theme, and the remainder of the week to add final touches. The result is this, my first WordPress theme, tentatively named BogoJoker Initial.

As is normally the case with my projects, this one pushed me to the edge! I sweat the details on every pixel, every color, the layout, the font, and more for the design. On the backend I wanted to make sure it was compatible with widgets, plugins, extensions, templates, yada yada yada. In the end it was looking pretty good on my test server, better then I had hoped!

Unfortunately when I moved it to the real world data that was on my blog my previous articles and markup were fighting me. It took another few hours to clean up old content, or at least get it into a workable state. There are likely to be some problems, but rest assured I’ll be working out the kinks and focusing on the future content.

 

Front Page:

The focus here is on the content. I wanted a minimal header and sidebar, a standout footer, and the majority of real estate devoted to the actual articles themselves. I’m also experimenting with a larger font-size to make it easier on the eyes of visitors.

wordpress_final_front_small

 

Individual Articles & Comments

Nothing too special about an individual article, but here the responses, or the comments, are center stage. I spent a lot of time making the design on these minimal as well, but they certainly stand out just as much as the article does. Avatars, links, dates, and permalinks are all there as you would expect!

wordpress_final_front_small

 

404 Page:

But, don’t leave yet, I’m glad you’re here! If you just arrived try checking out the home page for something that interests you. Who knows, maybe this was a good thing!

If it was one of my links brought you here I’d appreciate a heads up on my broken link. Please drop me an email so that I can resolve the problem. Thanks for the notice.

 

Zero Search Results:

It looks like your search on asdf came back with no results. But, clearly you have an interest in the subject, so I’ll make you a deal!

Drop me an email asking me to write about the topic and I’ll see what I can do! Be sure to let me known what you are interested in learning, or at least what you want to hear about it. I’m always looking for things to write about, and having someone already interested in a topic gives me more incentive. Thanks!

 

Archives & Portfolio

Just a little uniqueness. There are a few built in page templates. This is one for Archives, and there is another that I have to complete for a Portfolio. These look similar to regular articles, except there is a custom icon/image instead of the date.

archives

 

Theme Screenshot

Finally I made sure to add a little jazz when someone is selecting the theme. Here is the screenshot image I decided on:

screenshot

 

Thoughts?

I’d like to know what you guys think. Both the good, and the bad. The more criticism the better, otherwise I’m not going to learn and improve. Cheers.

Adding Looping to a Content Slider

A few days ago I came across the wonderfully magnificent easySlider jQuery plugin. It makes sliding content vertically or horizontal drop dead simple using totally natural markup and CSS. I immediately worked it into the design of ~/bin (this animation was in my original design on paper) and it worked flawlessly. However, like the plugin’s title implies, it was and is meant to be simple and therefore lacks some features in order to gain ease of use.

I took some time to become more fluent in jQuery, and add some enhancements by modifying the plugin. One of those enhancements was looping, and is the topic of this article. I had no prior experience working with these types of galleries and implementing looping seemed like a fun idea. So here was the result of my tinkering:

How Do You Implement Looping?

Give yourself a minute to get creative. Develop some ideas and strategies on how you would take the following markup for the slides, and make it loop.

<div id="slider">
  <ul>
    <li>content here...</li>
    <li>content here...</li>
    <li>content here...</li>
  </ul>
</div>

I came up with two strategies that use a similar technique to implement the loops. The above loop is an implementation of one of these strategies, but I wanted to compare and contrast my two versions here, and hopefully get some reader feedback on different techniques!

Hidden Moves Strategy

This strategy actually involves physically moving unseen slides around in the DOM. By moving the slides in such a way that there is always the proper “next slide” and looping can continue forever in either direction without errors.

Hidden Moves Strategy

Instantaneous Jumps between Clones Strategy

This strategy actually involves cloning the first slide and adding it to the end of the list. This now makes the first and last slides exactly the same. When we need to handling transitions to and from these slides we can instantly jump between them, and the user is none the wiser.

Instantaneous Jumps Between Clones

Comparing the Pros and Cons of Each

Hidden Moves:

  • Requires no extra space (in theory).

  • Simple to implement moves. 1 line executed as a callback on “next” and before the transition if “prev”

  • Expensive. Requires moving slides on every transition. This is actual DOM manipulation. Sure in nearly all cases this is negligible but it could be a pain for large, complex slides.

  • Wouldn’t work on looping a single slide. Kinda useless though right?

  • Does it work? By taking a slide off of the front won’t everything shift? Yes, this could get tricky, I honestly haven’t tried it.

Instant Jumps:

  • Requires extra space to duplicate the first slide.

  • Simple to clone a slide. 1 line of jQuery.

  • 1 time cost to clone, never again is there a DOM Manipulation cost.

  • Has the ability to loop on a single slide.

  • Tricky code to handle when to jump. Nothing difficult, just messy.

  • Does it work? Yes, Its what I’m using above..

Thats it for my analysis. Do you have any suggestions?

~/bin – Tilde Bin

So I wanted to do a little something over break. I had no idea what I would do, until I came across this article taking a look at the blueprint css framework. I had heard plenty of talk about this css framework, and other grid frameworks, and decided to give it a shot.

So I had something new I wanted to work with, what was the site actually going to be? I gave it a few minutes thought and ended up with an idea that satisfied my semi-recent Internet philosophy:

When I have something worth spreading I should write it on my blog or turn it into a webpage. This way when people ask me about it, or if I need to present the information to someone, I can just point them to that single source. This saves me from having to type and retype the same information over and over for different people. A single “master” source with the most up to date information is always optimal.

With that in mind, I decided to whip up a simple site to showcase the scripts that are in my “tilde bin” folder. Scripts that I wrote and use frequently that others might find useful. Sure I’ll still blog about them, but for those who want to download them its so much faster to point them to ~/bin instead of having them scour my blog.

~/bin

And thus ~/bin was born.

Sidenotes

I was quite satisfied with the result. It took only 24 hours from Conception to Creation. I made use of Blueprint and jQuery (AJAX and animation) to create a pretty fresh website. Sure its pretty basic but I felt comfortable the entire way through, and I loved every minute of it. I’m hoping that when Ruby on Rails 3 is released, if I have some spare time, I’ll convert it and include a small admin dashboard.

As of two years ago I’ve decided to get pretty serious with my New Years Resolutions. This year (like last year) I have a few ideas I’m tossing around. It will be a few weeks until I settle on one. Typically the resolutions will help me improve my health or lifestyle. One of the ideas I’m tossing around is blogging at least once per week. Compared to the other alternatives this is certainly the most fun. It has a hint of a challenge and its pretty doable. Let me know what you think!

AtomPub Overview and Curl Reference

Not long ago I had to learn about the Atom Publishing Protocol for my job. I spent about a week learning on my own time all about XML, AtomPub, and even the basics of HTTP. After that week I decided to write down my own personal overview and example code to try and “visually” explain AtomPub as best I could. The result was (and is):

My Visual Guide to AtomPub

Now keep in mind that I wrote that only a few weeks after learning it. The process of writing that guide forced myself to study it in greater detail than normal, actually run tests, and produce realistic output and examples. I know its not perfect (I’d probably be slaughtered for my definition of REST) but over time I’ll be happy to improve and update it. I think the design really improves the content making it readable, fun, and useful to refer to.

I’m linking to it now because I’ve done a number of projects like this (my Unix Tutorial) because I like sites that are strictly focused on one thing and do that one thing very well. I’ll probably spend a little bit of time on remainder of my break from school by cleaning up these small “brain dump” websites. I wanted to make sure they were mentioned and linked to from my blog. Clearly they will be of no use to anyone if they are never linked to!

I decided to include a small `curl` reference on my AtomPub guide. This is because its a very nice tool when working with HTTP requests and an overall generally useful shell program. I think people might find the curl reference useful.

I hope you enjoy this. I’ll be linking to these occasionally as they grow.

Blog Upgraded to 2.5.1

Inspired by a co-worker I decided to revamp my blog. The outdated WordPress, which I had made a number of customizations too was my incentive not to change. But, I bit the bullet and decided it would be worth it, especially with all the new things happening.

I’ll start out by saying that you will probably be seeing a lot more Ruby, Git, and Mac related articles then Web Development. That isn’t a bad thing, its just a news flash. As far as life goes, I’m working at IBM for 6 months, with the possibility of a continuation and its quite fun.

I’ve accumulated a number of ideas of subjects that I want to blog about. So stay tuned for some articles on the following: github, balloons, Larry Wall on programming, ~/.irbrc, rubygems, some mac apps, most especially Flow and its humble developer, and whatever comes between then and now.

So thanks for sticking with me if you have been and welcome if you’re new. I’ll be working out the kinks in the design and start shedding content.

search