BIT-101

SublimeProjectMaker – Sublime Text 2 Plugin for creating new projects

May 20 2012

I love Sublime Text 2. But one thing I’ve always felt was missing was the ability to easily create a new project. I understand the difficulties involved. Sublime handles many different languages and projects of all different types. Each type of project in each language could have a completely different setup. There is no one single project type that could possibly work for everything.

Unfortunately, that means that to create, say, a simple HTML project, you need to open Sublime, close whatever project is currently open, then do a “save project”, saving the non-project as a new project, creating a directory and also naming a project file. Then you have to add that folder to the project. Finally, you have to create the actual project files – .html, .js, .css, etc. and hook them all up to each other. I’m not even talking a complex project, you have to do all that for a simple hello world type program.

Luckily, its creators made Sublime Text 2 incredibly extendable with a plugin architecture allowing you to write your own plugins that tie into the core UI of the editor. For quite a while I’ve had the idea of creating a plugin that would simplify the creation of a project. My first stab at it can be found here. That, of course, wasn’t a plugin, but an Ant build file that copied files over to a new directory and created the project file. It worked, but required Ant to be installed, and you still had to create a directory and copy a bunch of files into it and then open a command line and run the build file. And creating a new project type would have been a major pain. Even I stopped using it after a while.

Finally, at the end of last week and over the weekend I got around to working on my plugin idea. Sublime’s extensibility layer is based on Python. I broke out my old Python books and got to work. A major challenge beyond that was the fact that large portions of the plugin API are not at all documented. Throughout the documentation you will see suggestions to look at existing plugins and commands to see what low level commands are available and how to use them. That made it quite a bit of a struggle at times, but it was a fun challenge, seeing bits and pieces of functionality come together.

And so I present SublimeProjectMaker. It is a full fledged plugin that lives within Sublime Text 2. When you call it up, you are presented with a list of templates. You choose one and then choose a location for your project. The template is scanned for any replaceable tokens and if any are found, you are prompted to provide values for them. Finally, the folder containing your new project is opened with the system file explorer application.

Templates are merely folders of files. At the moment there is only a bare bones HTML/Canvas template, but you can create your own very easily. I’ll be creating more and it’s my hope that others will contribute some as well.

There you have it. Hoping it’s useful.

One response so far

My Kindle Authoring Setup Part 2 – now with Markdown!

May 13 2012

As I was writing the previous post on my Kindle Authoring Setup, it occurred to me that markdown might be a solution to having to mark everything up with HTML tags. So I wrote a comment in there exactly as it hit my brain. After publishing that post, I went ahead and checked it out and it has worked beyond what I imagined.

First, I located the command line tool, pandoc (again, cross-platform, yay!) and installed that. Then I did some tests and was amazed how much it did. Read up on markdown syntax and was even further amazed. I’d say this writing/publishing flow is now as close to perfect as it can get.

First of all, I changed my concat target in the build.xml to use pandoc instead of ant’s concat.

    <target name="concat">
        <exec executable="pandoc">
            <arg value="-o"/>
            <arg value="${html_file}"/>
            <arg value="book/header.md"/>
            <arg value="book/pwc_ch01.md"/>
            <arg value="book/pwc_ch02.md"/>
            <arg value="book/footer.md"/>
        </exec>
    </target>

Here we specify the output file with -o plus the output file name, then the list of input files. It will concatenate them and convert them from markdown to HTML, using the file extensions to determine the format.

Some brilliant things about markdown that make it perfect for this format:

H1′s can be either:

# This is a header

This is a header
================

Since I’m using H1′s for chapter names, I like the underline format.

H3′s, which I’m using for sections, become:

### This is a section title

All other paragraphs are just plain text. p tags are added automatically.

It automatically does the smart quote replacements.

Surrounding underscores like _this_ become em tags (italicized in the book).

Surrounding asterisks like *this* become strong tags (bolded).

There is also markdown for images, but I’m fine with keeping the HTML image tags in there. Any inline HTML in a markdown doc is automatically preserved, with some caveats as mentioned in the above referenced syntax doc. I’ll switch over to markdown syntax for images though, just to keep everything in one format.

If that were all there was, I’d be thrilled. But it does even more.

Any blocks of text that are indented with at least 4 spaces or 1 tab are surrounded with pre and code tags! Furthermore, any angle brackets in that section are turned into their HTML entity equivalents. So basically I can copy and paste my code as is. All I need to do it tab it over 4 spaces.

Finally, inline code style, like this are accomplished with back quotes `like this`.

Couldn’t be happier with this setup right now. I’m basically writing straight up plain text with straight up plain copy and pasted code and it’s all formatting to a perfect ebook with one click of a button.

6 responses so far

My Kindle Authoring Setup

May 13 2012

As mentioned previously, I have started working on self-publishing my Playing With Chaos book on the Amazon Kindle self publishing service. I quickly got the outline, first chapter, part of the second, some code and images done. Then last weekend I decided I better check into the whole publishing process in a bit more detail. I went through all the material on Amazon’s site, as well as several other tutorials. I even downloaded a free ebook on Kindle publishing and paid for another 99 cent book on the subject. I learned a lot, but none of it made me very happy to begin with. Here’s why:

Pretty much every reference starts out telling you to write your book in Microsoft Word. Now don’t get me wrong – I think Word is a great tool as long as you are writing in word and then printing your documents out, or sending them to someone else who will view them in Word. It’s a super powerful application with every tool you could possibly imagine for writing almost anything. But where Word gets really ugly is its export functionality. I’ve done some professional work trying to convert exported Word docs into other formats. It was one long, horrible headache.

Workflow #1

The simplest possible workflow is:

1. Write your book in Word.
2. Upload to Kindle and let Amazon turn it into a Kindle ebook.

I suggest you try this. When you’re done looking at the results and wiping up your own vomit, we can move on.

Workflow #2

The next workflow, which is what most resources will recommend is:

1. Write your book in Word.
2. Save it as a filtered web page.
2a. Optionally clean up the HTML.
3. Zip and upload the HTML and other files to Amazon.
3a. Alternately, run it through another program to create a .mobi file and upload that to Amazon.

Doing steps 1, 2 and 3, without the optional/alternate steps will essentially give you the result of the first workflow. But I also suggest you do steps 1 and 2 and look at the results. This will give you an idea of why it’s such a mess. For my 1.5 chapter book in progress, the resulting HTML file was composed of 50% CSS, 50% HTML. All kinds of custom styles going on there. 99% of which will be ignored.

For step 2a, several pages I found offered advice on the various things to clean up and delete or change from the HTML/CSS. Nobody offered an automated solution. This gives you a workflow like this:

A. Write some of your book.
B. Export it to HTML.
C. Go through a lengthy, manual, painful process of cleaning up the HTML by hand.
D. Convert it to .mobi or upload it to Amazon.
E. Preview it.
F. Write some more of your book.
G. Do B-E again.

No thanks.

Now let’s move on to step 3a. There are three main tools used for converting HTML to .mobi.

- kindlegen

This is Amazon’s command line tool, so it must be good, right? Wrong. It’s known to be buggy and its output is just incorrect. It was my first choice, despite the warnings I’d read on various sites. There are Windows, Mac and Linux versions. And it’s command line! How could I not try it. But I soon found myself agreeing with the warnings and abandoned it.

- Mobipocket Creator

This is a Windows-only tool that will take documents of various types and convert them into ebooks. I tried this, but didn’t like it too much. It has a very consumery feel to it. Seems like it tries to over-automate the process for you, making all the decisions for you. Probably with a bit more investment of time, I could learn to control it more, but I was also not thrilled about the Windows-only part. And the fact that it’s a graphic interface tool, which I’ll discuss more in depth shortly.

- Calibre

The third choice is mentioned by a few, but seems to scare away most people. It’s triple platform – a big plus. In fact, I think it began as a linux tool. It also exposes just about every possible option you could ever want to tweak on your import/convert/output workflow. A bit overwhelming at first, but I liked that. While the main program is a graphical tool, I soon found out that it all just sits over a suite of command line tools that expose all those possible options. I was onto something big here!

Workflow #3

I quickly abandoned the whole idea of writing in Word. For one, it means jumping back and forth in a VM. Most Kindle books do not actually have so much formatting that you’re really getting that much benefit out of working in a word processor program like Word anyway. But more importantly, Word was just making me crazy with all that extra markup and styling. Furthermore, it was destroying my code formatting. I’d have a line of code with 4 spaces of indenting. It would sometimes do 3 spaces, sometimes 4, sometimes 5! No lie. True story. Trust me, I spent a couple of hours trying to just get a consistent 4 spaces = 4 spaces conversion. No go.

So I decided to just write my book in Sublime Text 2. Plain text baby!

OK, to be honest, it’s not plain text, but plain HTML. Yes, I’m writing my book with HTML markup. Before you start groaning, let me re-iterate that there is very little formatting that needs to go on in a Kindle book. Really all I’m doing is putting p tags around my paragraphs, and h tags around headings. And the occasional bold/italic/code/pre tag here and there. And images, yeah. But honestly, 95% of it is p’s and h’s.

~~I’d like to figure out some way to make that a bit cleaner eventually. Maybe some kind of markdown to HTML conversion. Something to research…~~

See my update on using markdown and pandoc here: http://www.bit-101.com/blog/?p=3502

Anyway, I’m writing the code for the book in Sublime, so it’s nice to have the text and the code in one project so I can just copy and paste.

Now, the workflow in most of the examples I read was something like this:

1. Write.
2. Open MobiPocket Creator.
3. Import your files.
4. Tweak the following settings…
5. Export your book.
6. Close MobiPocket Creator.
7. Open an ebook previewer.
8. Load your exported book into the previewer.

Here’s the workflow I wanted to have:

1. Write.
2. Press F7.

And I have achieved exactly that! Yes, from within Sublime Text 2, I can change some text, hit F7, sit back, and in within a few seconds, I have an ebook reader open with my published .mobi format book loaded up.

The Setup

In the root project folder I have the following:

- book
- code
- images
build.xml

book is a folder containing the chapter HTML files, plus a header and footer.
code is a folder with HTML and .js files that are the example code files I’m building throughout the book.
images is a folder. Guess what’s in it.
build.xml is an ant build file. What? You hate ant? Sorry to hear that. You lose.

Anyway, if you really don’t like ant, what I have is not rocket science. Should be easy enough to convert into your superior build system. But let’s look at what it does.

<project default="preview">
    <!--
        Targets:
            code:    executes code_file property in browser
            publish: creates ebook
            preview: creates and previews ebook
    -->
    <property name="browser" location="/usr/bin/google-chrome"/>
    <property name="code_file" location="code/sierpinski.html"/>

    <property name="book_name" value="playing_with_chaos"/>
    <property name="author" value="Keith Peters"/>
    <property name="cover_img" value="images/cover.jpg"/>

    <property name="html_file" value="${book_name}.html"/>
    <property name="mobi_file" value="${book_name}.mobi"/>
    <property name="meta_file" value="${book_name}.opf"/>

    <target name="concat">
        <concat destfile="${html_file}">
            <filelist dir="book">
                <file name="header.html"/>
                <file name="pwc_ch01.html"/>
                <file name="pwc_ch02.html"/>
                <file name="footer.html"/>
            </filelist>
        </concat>
    </target>

    <target name="publish" depends="concat">
        <exec executable="ebook-convert">
            <arg value="${html_file}"/>
            <arg value="${mobi_file}"/>
            <arg value="--chapter=//h:h1"/>
            <arg value="--chapter-mark=pagebreak"/>
            <arg value="--level1-toc=//h:h1"/>
            <arg value="--level2-toc=//h:h3"/>
            <arg value="--authors=${author}"/>
            <arg value="--cover=${cover_img}"/>
            <arg value="--output-profile=kindle"/>
            <arg value="--smarten-punctuation"/>
        </exec>
    </target>

    <target name="preview" depends="publish">
        <exec executable="ebook-viewer" spawn="true">
            <arg value="${mobi_file}"/>
        </exec>
    </target>

    <target name="code">
        <exec executable="${browser}">
            <arg value="${code_file}"/>
        </exec>
    </target>

</project>

We start out with some various properties that will get used throughout the build targets. The default target is preview while I’m writing the book, or code while I’m writing code. The preview target depends on publish, which depends on concat. The concat file takes all the chapters, wrapping them in an HTML header and footer, creating one large HTML file with the whole book. The header.html looks like this:

<html>
	<head>
	  <title>Playing with Chaos</title>
	  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	  <style type="text/css">
	    p {
	      margin-bottom: 10pt;
	    }
	    h1 {
	    	margin-top: 120px;
	    	margin-bottom: 20px;
	    	text-align: center;
	    }
	    pre {
	    	font-size: 10px;
	    }
	    .fig {
	    	font-style: italic;
	    	font-size: 10px;
	    }
	  </style>
	</head>
	<body>

And the footer just closes things up:


	</body>
</html>

All the chapter files just go in the body section. Chapter 1 looks like this:

<a name="start"></a>
<h1>Chapter 1: Introduction</h1>
<h3>Fractals, Strange Attractors and Chaos Theory</h3>

<p>Blah blah blah</p>

<p>and blah.</p>

<h3>Another Section</h3>

<p>more blah</p>

<p>Here's some code:</p>

<pre>
function foo() {
  blah();
}
</pre>
<mbp:pagebreak/>

The <a name=”start”></a> is a special tag that Kindle will use to indicate the start of the book. If a user navigates “Go to… Beginning”, this is where they will wind up. So that’s only in Chapter 1. Chapter titles are h1. Sections are h3. Paragraphs are in p’s. Code blocks in pre’s. Note that any < or > in code (or anywhere for that matter) will need to be converted to HTML entities. Pain in the neck there, but whatever. To be honest, it’s less work than I had to manually do to format this blog post. Finally, there’s a custom Kindle tag that inserts a page break, useful for end of chapters.

Again, see the update at http://www.bit-101.com/blog/?p=3502. No manual HTML needed at this point with markdown.

OK, back to the build. After concat, publish runs. Let’s look at that again…

    <target name="publish" depends="concat">
        <exec executable="ebook-convert">
            <arg value="${html_file}"/>
            <arg value="${mobi_file}"/>
            <arg value="--chapter=//h:h1"/>
            <arg value="--chapter-mark=pagebreak"/>
            <arg value="--level1-toc=//h:h1"/>
            <arg value="--level2-toc=//h:h3"/>
            <arg value="--authors=${author}"/>
            <arg value="--cover=${cover_img}"/>
            <arg value="--output-profile=kindle"/>
            <arg value="--smarten-punctuation"/>
        </exec>
    </target>

This calls up the Calibre command line tool, ebook-convert. The command line tools should be automatically installed when you install Calibre on Windows or Linux. Apparently there is one extra step to install them on Mac. The first two args are the input HTML file, and the output .mobi file. Then there are a whole bunch of options.

I’m saying chapters are h1′s and should get a page break. I’m not sure how that differs from the custom pagebreak tag I added manually, but doing both doesn’t seem to hurt anything. The table of contents should be built from h1′s and h3′s.

I’m setting metadata for the author name and cover image. The metadata for the book title will come from the HTML title tag.

I’m setting the output profile as Kindle. Not sure exactly what this does. Seems to work fine without it, but seems sensible to set it.

The last arg is –smarten-punctuation. This turns regular apostrophes, single quotes, and double quotes to their curly equivalents. So I can simply type

"foo"

and get

“foo”

in the output. Also converts single dashes to en dashes and double dashes to em dashes. Brilliantly, this option ignores anything in pre tags!

Once the book is published, the preview target will run. This runs another Calibre command line tool, ebook-viewer, passing in the name of the .mobi file that was just created. This pops open an ebook reader with your book preloaded. This is NOT a Kindle simulator by any means, but it will let you verify that your cover is set, your text looks like what it should, images show up, TOC works, etc.

So again, write something, throw some tags around it, hit F7 and there it is in ebook form. Couldn’t be better. You can then take this compiled .mobi and upload it to Amazon for publishing.

Additional testing. If I’m doing something that I want to make sure looks just right, I have a VM open with Windows running in it. There is a Kindle preview tool that you can download from Amazon that lets you preview how your .mobi will look in a regular Kindle, Kindle DX, Kindle Fire, iPad, iPhone, etc. On Windows and Mac you can also install the Kindle Desktop Reader and make sure your book looks OK there too.

Finally, nothing beats dragging the .mobi into right into a real live Kindle and seeing how it looks on the real live device. There’s actually a Calibre command line tool for transferring a file to a device as well. But with the Kindle, it needs to be plugged in and mounted for transfer, then unmounted to actually read the book. And I don’t test on device every time I build, so I did not make that part of my process.

Here’s the book as seen on a real device:

Oh, and there’s also the code target, which simply launches the specified HTML file in the browser. I just change the default target to code while I’m coding up an example, and back to preview when I’m writing the book.

Summary

Overall, I’m super happy with how this is working out. The big things I’d like to improve are 1. as mentioned, figuring out some possible markdown conversion to simplify formatting and 2. something to possibly automate replacing angle brackets in pre code tags.

Here’s a link to the Calibre command line tools:

http://manual.calibre-ebook.com/cli/cli-index.html

And all the possible options for publishing HTML -> MOBI:

http://manual.calibre-ebook.com/cli/ebook-convert-4.html#html-input-to-mobi-output

I’ve pored over that last link, but I’m sure there’s still some things I could use in there that I haven’t investigated.

7 responses so far

Playing With Chaos: The Book

Apr 29 2012

Well, the title gives it away, so I just need to elaborate. I had so much fun and did so much research and wrote so much code for my Playing With Chaos presentation, and it went over so well and was very popular. But in the 45 minutes I had last week, or even in a full hour of talking, you can barely scratch the surface of the simplest bits of math or code and only show a few quick images or demos of each example. And there were lots of other examples that I didn’t even have time to touch on. I would love to be able to cover all the topics I had in mind, and go over each one fully enough, with well explained code. Thus, I’ve been thinking of writing a book based on the presentation.

The truth is that I’ve been thinking of writing this book for about a year. But doing the presentation at Beyond Tellerand – Play! solidified the idea. Here are some details about my plans:

1. I’m going to self-publish the book. I’ve been really interested in self-publishing for a while. This will be an experiment to see how well it works for me. The biggest thing I’m concerned about is the editing process. I’m sure I can dig up a technical reviewer or two, but the copy editing phase where someone at the publisher fixes all your spelling and grammar and unifies your tenses and persons and numbers, etc. is invaluable. I actually do understand grammar pretty well, but in a longer piece of writing I can lose track of the style I’m using and jump back and forth. It will take an extra reading or two with extra attention on this stuff to get it down. Or perhaps I’ll find someone willing to help me out on this point.

2. I’ll be going through the Amazon Kindle publishing service. I think this offers the best form of distribution, discoverability, protection, commerce, etc. In addition to being able to read the book on any existing Kindle, it can be read on any iOS, Android, Windows Phone 7 or Blackberry device and on any computer via standalone reader apps or the Kindle web app. This also allows me the option to publish through other services such as B&N Nook and Apple iBooks as well. In addition, there are services that will publish hard copies of your Kindle book on demand for those who want to kill trees.

3. I will not be doing a Kickstarter project for the book. I don’t believe most books require any kind of start up capital. Unless you need to do some kind of heavy research, travel, or buy some expensive equipment, or quit your day job and write full time, there is really no up front cost. You sit down and write the book. The only thing I might need to pay out for would be a technical reviewer and/or copy editor, and that would be later and something I’m sure I can work out. I’ve contributed to funding two books over the last couple of years on Kickstarter and neither one of them has yet seen the light of day. It leaves the author in an odd position of being responsible to many people, but with no single person invested so heavily that they are going to bug him daily to meet deadlines. I’m not even sure there is any penalty if you get funded and never release the thing you were funded to do. Do the contributors eventually get their money back if nothing happens?

4. The examples will be done in JavaScript with HTML5′s Canvas. This may or may not be your favorite platform, but I feel like it offers appeal to the widest potential audience. Even if you’ve never done any serious JavaScript, you can fire up a text editor and browser and be coding and running HTML/JS in minutes, for a total cost of $0.00. If you’ve done any programming in any other language, JS is a piece of cake to pick up, and generally easy enough to convert into the language of your choice. Few other languages require so little monetary investment, so little setup for a coding environment across the boards, and such a low learning curve for the language itself.

5. Right now, the TOC stands at 12 chapters, but that could change and rearrange. Right now I’m most of the way through the introduction chapter and have been working on developing a base package that all the examples can use to prevent massive duplication of code. The goal is to not rely on any major third party libraries just as jQuery, etc., and not to create something so complex that it becomes a heavy dependency. Basically, it’s just some boiler plate to grab the canvas, 2d context, some properties like width and height, and various utility functions for commonly used operations.

So watch this space for various updates over the next few months. Maybe even some teaser images or live demos. I haven’t really got a solid deadline in mind, but roughly hoping to be done by the end of the summer.

9 responses so far

Beyond Tellerand – Play!

Apr 28 2012

I just got back last night from Beyond Tellerand – Play! This is a conference put on by my good friend Marc Thiele. Formerly known as FFK, it’s a conference that I’ve wanted to go to for a while, and which Marc and I have talked about for several years. We finally got it together this year and I made it out. The conference is held in Cologne (or Köln), Germany. There are two days of sessions in two tracks, plus a day of workshops before and another afterwards.

I flew out Monday night, getting into Cologne Tuesday morning. Despite the jet lag and red eye flight, I immediately went for a 10K run on the Rhine River, then back to the hotel room to catch a short nap before heading out to dinner with the other event speakers.

Wednesday, the conference proper began. I saw the keynote and hit up sessions in almost every track. I skipped the pre-lunch track so I could eat early and use the lunch break to ensure my computer could properly project on the screen. The last time I spoke with this machine, I had some problems, not realizing I had the wrong Linux video drivers. But all went well this time and I was the first speaker after lunch.

My presentation was a newly revised version of the Playing with Chaos talk I’d done a few years ago. I cover fractals, strange attractors, a bit of chaos theory, etc. All the examples this time are done in HTML5/JavaScript with canvas. Actually, this version was a bit cut down as I only had 45 minutes to talk, instead of the usual hour or so. The talk went very well. I decided to redo this particular talk because it did seem like one of my most popular talks, and I guess that was a good choice. I do believe I got some of the best feedback for any talk I’ve ever done this time. I am not scheduled for any other talks this year, but I would like to do this one again with a bit more time to cover things. The presentation slides and all the examples are on line at http://www.bit-101.com/chaos.

Wednesday night was the conference party. It was at a small club with Andre Michelle DJing. It got a bit loud and warm inside, so about half the crowd was gathered out front. I found it a bit chilly outside, so I spent the evening cycling between the two locations. Also gave me a chance to mingle with plenty of people.

Thursday, many of the morning sessions were in German, so I slept in a little bit, went for another run, and got over to the venue in time to see Tom Beddard, aka subblue, do his talk about fractals. Two fractal talks in one conference? Does it get any better??? This was an absolutely mind blowing presentation. He skimmed through some of the same basic material I’d covered in my talk and then dived in to a bunch of demos from his Fractal Lab program. Hoping to be able to play with this one myself.

Finally, the conference ended. Another nice meal with friends and then back to the hotel to try to get a good night sleep before my morning flight. Unfortunately, that last cappuccino seemed to have hit me hard and after sleeping for about an hour I was wide awake most of the rest of the night. But somehow managed to get up and out to the airport, where I hopped on over to Amsterdam for a 3 hour layover. Finally got on that flight and taxied out to the runway. Engines revved up and we started barreling down the strip, gaining speed. And then seconds before we would have been airborne, the engines cut out. We slowed to a stop and pulled off the runway. Apparently some indicator light had come on just before we were about to leave the ground and whatever it indicated, it was important enough to make them abort takeoff at the very last second. Taxied back to the gate, got someone to fix whatever it was and then we had to wait one hour to “let the brakes cool down”. Bizarre. So, three hours late, I was on my way to Boston. Pain in the butt, but I respect the fact that they made that choice. Better to have people read what happened on my blog than an investigator dig it out of a black box.

A note on the code in the above linked examples: although I haven’t posted the source directly, it’s all HTML and JavaScript, so you won’t have a very hard time digging it up. The examples make use of a personal graphics library I’ve been creating called “bitlib”. You are free to use this library if you find it useful, but understand that I have not released it as an official library, and may or may not in the future. So don’t complain if it doesn’t work, you don’t understand it, or it’s missing some feature you need.

As for the examples themselves, a lot of the code was thrown together at the last moment with lots of experimentation and just stopping when something looked presentation worthy. So I can’t guarantee how well written or understandable it all is. Needs a lot of clean up. However, I will soon have an announcement on a related subject that some people will find very exciting. Stay tuned!

5 responses so far

How I Fell Back in Love with Android: A CyanogenMod Story

Mar 17 2012

Almost two years ago I got my first Android device, a Nexus One. I was not at all impressed right off the bat. Coming from the iPhone world, things just didn’t seem … “right” about it. On the other hand, I was intrigued by it and kept wanting to check it out. Eventually, I forced myself to use it for a couple of weeks straight. My eyes were opened, and iOS never again seemed the least bit compelling to me.

Don’t worry, I’m not going to try to tell you that Android is “better” than iOS. It’s a ridiculous premise. “Better” is subjective. I like it better now, but it took a while to see things differently. After several months, I did go back to my iPhone for a couple of months due to the fact that my Nexus was not compatible with my carrier (it was a gift) and I got sick of using Edge rather than 3G. A couple of months later, I got a Windows Phone 7 device, and that was cool too. But after spending several months on all three mobile platforms, I decided that Android was my favorite. So a year or so ago I went out and bought a Motorola Atrix. No doubt the best phone I’ve ever owned.

In the last few weeks or so though, I noticed it was having some problems – it would freeze up for a couple of seconds, then be fine. Actually, I guess that was the only real problem. I figured it was probably something I installed that was running out of control or had a memory leak or something. Who knows. But I figured after a year of installing and uninstalling God knows what, it might be time to wipe it clean and give it a fresh start.

Gearing up to do so, I gave a check on the current predictions of the release of Ice Cream Sandwich. It’s targeted for 3rd quarter 2012 for the Atrix. Not waiting. But how about a manual install? I’d looked into CyanogenMod for the Atrix months ago but it didn’t really look like it was ready for prime time. But looking into it last week, it seemed like a pretty viable solution. I bit the bullet and decided to go for it.

The steps I took are outlined in this post at android-advice.com, but I will add a few points of importance:

A. Find a Windows PC you can use for this process. There are probably ways to do it on Mac or Linux, but all the tried and true and stable tools seem to be for Windows. All the tutorials, advice, forum and blog posts assume you are doing it on Windows. So if you try to do it on something else and run into trouble, you’ll be out in the cold. I used my ancient, 6 year old PC laptop running Windows XP. It worked fine.

B. I don’t think it is mentioned in the post, but you’ll need to install the Windows USB drivers for the Atrix. Just search “atrix usb drivers” and you’ll find them easily.

C. As of this writing, the post links to a CM9 rom build that is a couple of versions out of date. Go to the source and get the latest build from Jokersax: http://www.jokersax.com/developer-pages/jokersax/cyanogenmod-9-atrix/. I used Beta 0.3.3, but just now I see that 0.4.0 is out. Hmmm… I may have an update to this post shortly after posting it.

D. The post also links to an older version of Google Apps that didn’t install at all for me. In the comments of the post, someone linked to another version. That installed, but Google Calender sync was broken. Again Jokersax to the rescue: http://www.jokersax.com/developer-pages/jokersax/cm9-gapps/. I used the gapps v10 build. Worked like a charm.

Other than that, follow the steps of that post TO THE LETTER. There are a few basic steps. First, the prerequisites:

1. Rooting your phone. The post links to another post with explicit instructions on how to do that. Follow them exactly.

2. Installing ClockworkMod. This is as simple as going to the Android Market, searching for an app named “Rom Manager”, downloading it and installing it.

3. Unlocking your bootloader. Again, there is a link on the above page with instructions.

Prerequisite 1 and 3 are the only real places you will need a Windows PC for. The rest of the work is done directly on your phone with ClockworkMod. Basically, you copy the new ROM onto your SDCard, use Clockwork to wipe your current OS and cache (note that step 4 “Wipe cache and wipe dalvik cache” is actually two distinct steps – the dalvik cache wipe is in the “advanced” section of Clockwork’s menu – see the video on that page), and then using Clockwork to install the new ROM and then Google Apps the same way.

This should all take you a couple of hours. Maybe a bit more if it’s your first time doing this kind of thing. Like me. If I were to do it over from scratch at this point, I could probably do it in under an hour. But take your time and make sure you’re doing every step precisely. Here’s a video of what you will wind up with (this is not my video):

Also, once you have all the prerequisites done, updating a ROM is really easy. It should keep any data intact on your phone, and if you install the Google apps, you can allow it to back up all your installed apps automatically, so when you update and reinstall GApps, it will then automatically re-download and install all the apps you had installed before the update. Pretty sweet.

I have to say, I’m really loving Ice Cream Sandwich on the Atrix. There are some really great user interface improvements that make the phone a joy to use. Very happy that I took the time to go through all this – and I learned a lot, too.

But wait, there’s more!

After I got all this done, I found the Reloaded ICS mod here:

http://forum.xda-developers.com/showthread.php?t=1531222 with some additional info and screenshots here: http://forum.xda-developers.com/showthread.php?p=23711000#post23711000

Reloaded ICS adds some really great UI enhancements – in particular in the notifications area – all kinds of really great functionality in there. I highly recommend it. It’s installed the same way as CM9 and gapps – copy the zip to your sd card and install with Clockwork.

No Atrix?

Of course, CM9 is available for plenty of other devices. If you decide to get into this kind of thing, the XDA Forums are your best friend. If CM9 is available for your device, you’ll find out about it there.

6 responses so far

JavaScript Object Creation: Learning to Live Without “new”

Feb 29 2012

I wrote yet another article on object creation in JavaScript. This time, for Adobe! I’m really glad to see that they are reaching out to publish articles like this. I hope to see a lot more on similar subjects. And I hope that means that they may have additional tooling and products in the works that will support high end web development.

Here’s the article link:

http://www.adobe.com/devnet/html5/articles/javascript-object-creation.html

It touches on many of the same principles of my last couple of JS object posts here, but supplies some non-trivial, real world code to demonstrate the principles.

One response so far

Thoughts on Private in JS

Feb 18 2012

When you get into a bit higher end JavaScript patterns, one thing you’ll read very early on is this concept: that although JavaScript does not have private members or access modifiers, it is possible to achieve this behavior with closures. This is often done through an IIFE and is the simplest implementation of the module pattern. Like so:

var mod = (function() {
    var privateVar = "foo";
    return {
        getPrivateVar: function() {
            return privateVar;
        },
        setPrivateVar: function(value) {
            privateVar = value;
        }
    };
}());

console.log(mod.getPrivateVar());
mod.setPrivateVar("buzz");
console.log(mod.getPrivateVar());

The IIFE executes, returning an object with a couple of methods. These methods have access to the original privateVar, which is not accessible anywhere else. Private var, right? All good and well, but I’ve noticed one aspect of this that almost nobody ever talks about…

Modules are singletons.

OK, they are not really singletons in the full sense of the singleton pattern with a static getInstance method and a guard against creating multiple instances. But they are objects that are created a single time and unless you were to copy and paste the code that creates them, there’s no real way to create an additional instance of one of them.

I’m not going off into a “singletons are evil” rant or anything, but it should be pointed out that modules created in this way only have a single instance. This is pretty obvious, since the module is created by an IIFE, which runs once when it is defined, and that’s it. For most things that you would define as “modules” this is probably exactly what you want, which I guess is why nobody talks about it. A module is often a library, like underscore or jquery, etc. Something you generally would not want multiple copies of floating around in the first place.

But say you want some kind of object that it would make sense to have multiple copies of. Say a game with players. If you defined a player object like above, you could only have a single player. So you need to change things somehow to allow for multiple instances.

The first idea is just to remove the IIFE and just have a function that you can call multiple times to create individual objects:

function playerMaker(pname) {
    var name = pname;
    return {
        getName: function() {
            return name;
        },
        setName: function(value) {
            name = value;
        }
    };
}

var player1 = playerMaker("Fred");
console.log(player1.getName());
var player2 = playerMaker("Barney");
console.log(player2.getName());

This works just fine, but do you see the issue here? that return object is created anew every single time you create a new instance. Not a big deal in a trivial example like this, but say you had an object with dozens of properties and methods and you were creating scores of these things. All those methods and properties would be created as brand new methods and properties on every object, cranking up your memory consumption and creation time. Probably not a good idea in most cases.

We could then turn to something like the revealing module pattern, which defines the functions a single time in the module, and then returns an object that references these. In this case, we still want playerMaker to be a function, so we return a function that returns an object that references the single instances of the methods:

var playerMaker = (function() {
    var name = "";

    function getName() {
        return name;
    }

    function setName(value) {
        name = value;
    }

    return function() {
        return {
            getName: getName,
            setName: setName
        };
    };
}());

var player1 = playerMaker();
player1.setName("Fred");
var player2 = playerMaker();
player2.setName("Barney");
console.log(player1.getName());
console.log(player2.getName());

Only this doesn’t work at all, because the “private” var name is defined only once in the original IIFE and is like a static var amongst all instances. If you tried to move it into the return function at line 12, it wouldn’t work, because then it would not be in the scope that the getName and setName functions would have access to.

The long and the short of it is that for private properties to work, they rely on a closure, and for multiple instances to each have their own accessors and private properties, each one needs to have its own closures. A shared closure can only access a shared property. So we can’t really escape the second example.

Perhaps there is some way to do this, but I suspect that the complexity involved would probably outweigh the benefits.

In my original draft of this post, I went into a minor rant about how you shouldn’t worry about private vars in JavaScript, as it doesn’t have them and it doesn’t make sense to over-engineer all kinds of complexity to simulate them. But I’m not feeling very ranty at the moment, so I deleted all that.

This isn’t to say that the module pattern as commonly used, with its private vars and methods is bad. It’s actually quite simple and elegant as long as you only need a single instance of that module, and I back it up as a great pattern 100%. But if you are trying to extend it to objects with multiple instances, I think you are best to leave privacy behind.

Interestingly, between the time of writing this post and publishing it (a couple of days) I listened to the latest JavaScript Jabber podcast http://javascriptjabber.com/005-jsj-javascript-objects/ on “JavaScript Objects”. A great listen, and some of these very points were brought up. Check that one out. It’s a great new podcast as a whole, and with only 5 episodes so far, well worth going back to the start and checking out all of them.

20 responses so far

SublimeText2 Plugin: RunBuild

Jan 16 2012

I was talking to my coworker, Todd Anderson, today about running build systems in Sublime Text 2. It’s a great editor, very powerful and configurable. But somewhat of a lack of documentation on all those features. One problem we both had was setting up multiple build systems on a project, say one for running unit tests, one for running JSLint, one for deployment, etc. You can specify build systems right in a project file as per this reference: http://www.sublimetext.com/docs/2/projects.html. For a drop dead simple example, you could have one that launches your index.html file in chrome, and another that launches your unit tests in tests.html. This would look something like this:

"build_systems":
[
    {
        "name": "preview",
        "cmd": ["/usr/bin/google-chrome", "$project_path/index.html"]
    },
    {
        "name": "test",
        "cmd": ["/usr/bin/google-chrome", "$project_path/tests.html"]
	}
]

Now, in your “Tools/Build System” menu you should have two entries: preview and build. You can choose one, and the next time you build it will do what you specified in that system. The problem is switching between them. Grab the mouse and go to Menu / Tools / Build System / test (or preview). Then, F7 or Ctrl-B to build. Or maybe you forgot which one you were on, so when you build it builds the wrong thing and you have to cancel and go back and check and redo it. Minor pain, but it gets annoying.

Ideally, you could assign a specific keyboard command to each build system. So I started digging in to see how to do this.

First Part of the Solution: set_build_system

After some digging around, I found that there’s an internal command called “set_build_system”. You pass it a single argument called “file”. The value is one of two things:

1. The path to a sublime-build file, such as “Packages/Java/Ant.sublime-build”

2. The name of a custom build path in your project file (like what we just created as “test” and “preview”.

You can use this command in a keyboard shortcut. Go to the Preferences menu, Key Bindings – User. This will open up a Default sublime-keymap file, which should contain an empty JSON array like this: [], unless you have already added some shortcuts. You can create shortcuts that will change your build system like so:

[
    { "keys": ["ctrl+shift+p"], "command": "set_build_system", "args": { "file": "preview"} },
    { "keys": ["ctrl+shift+t"], "command": "set_build_system", "args": { "file": "test"} }
]

With this, Control-Shift-P will set your build system to your custom preview build system, and test likewise. But it’s still a two step process: set the system, then build. And again, there’s no visual indication of which system is currently set, and no visual indication of when it changes, so you’ll still find yourself checking manually in the menu to see which is checked.

Ideal scene again, would be one shortcut that chooses the system and then builds.

Second Part of the Solution: plugins

A keyboard shortcut can only run a single command. But we need to run two commands: choose the build system and then build. To do this, you can create a sublime text 2 plugin. This is far easier than it sounds. In fact, Todd and I were both pretty shocked at how easy it turned out to be and how quickly we got it working.

A plugin is a Python class that creates a custom command. It extends one of three plugin classes: WindowCommand, TextCommand, or ApplicationCommand. This post was very helpful in getting me started:

http://net.tutsplus.com/tutorials/python-tutorials/how-to-create-a-sublime-text-2-plugin/

Here’s the command that Todd and I came up with virtually at the same time:

import sublime, sublime_plugin  

class RunBuildCommand(sublime_plugin.WindowCommand):
    def run(self, build_system):
        self.window.run_command( "set_build_system", {"file": build_system } )
        self.window.run_command( "build" )

Running through it, this imports a couple of sublime packages, defines a class that extends WindowCommand, and a single method called run.

The run method takes a single parameter (besides “self” that all python methods get) which will be the name of the build system to run.

It then does the two things we need to do by making calls to self.window.run_command, passing in the command to run and any arguments.

First we call “set_build_system” like we did in the first keymap example. This passes through the build_system argument.

Then we call build, with no args.

So we’ve accomplished our two actions in a single stroke: set the build system, then build.

You can save this file as “RunBuild.py” anywhere in your Packages folder in Sublime’s config folder (check documentation to see where that is on your OS). I suggest you give it its own folder so it becomes /Packages/RunBuild/RunBuild.py.

Now we just need to change the keymap to call this custom command instead of set_build_system. The name of the class, RunBuildCommand, will be mapped to a command called “run_build”. CamelCase becomes camel_case in this setup. So we do this:

[
    { "keys": ["ctrl+shift+p"], "command": "run_build", "args": { "build_system": "preview" } },
    { "keys": ["ctrl+shift+t"], "command": "run_build", "args": { "build_system": "test" } }
]

And we are done! Control-Shift-P launches index.html in the browser, and Control-Shift-T launches test.html. Of course, your build system(s) could be far more complex than the simple one I showed here, there you go.

2 responses so far

CSS Roadblock

Jan 16 2012

Generally I like to use my blog for dispensing knowledge, advice, opinions, thoughts, musings, and of course, FACTS. But occasionally I get stuck on a point and all my research leads me to a dead end, and I’ll write a post that asks for help. I figure the answers just might help someone else down the line anyway, so it’s not purely selfish.

OK, so I’ve learned to stop worrying and love JavaScript. HTML I can tolerate. But CSS is gonna kick my ass.

Here’s what I want:

Two divs, floated side by side, varying amounts of text in them, but that text needs to be bottom aligned. Here’s what I came up with after a few Google searches:

<style type="text/css">
	.header {
		position: relative;
		float: left;
		width: 200px;
		margin: 10px;
		height: 100px;
		background-color: #ffcccc;
	}
	.header-content {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
	}
</style>
<div class="header">
	<div class="header-content">Some content that will wrap lorem ipsum and all that crap just to make a long lon long div</div>
</div>
<div class="header">
	<div class="header-content">other stuff</div>
</div>

And here’s what it looks like:

But I have one more need. I’m hard coding the height of the header class to be 100px. I want it to be the exact height of the tallest content. So that it looks like this:

The thing is, that because the header-content div is absolute positioned, then the header div’s height will be 0 unless explicitly set. So the bottom of header is the same as the top of header and header-content goes off the top of the page.

The only way I’ve managed to do this is via JavaScript something like this:

var contents = document.getElementsByClassName( "header-content" );
var h = 0;
for( var i = 0; i < contents.length; i++ ) {
	var content = contents[ i ];
	h = Math.max( h, content.offsetHeight );
}
var headers = document.getElementsByClassName( "header" );
for( var i = 0; i < headers.length; i++ ) {
	var header = headers[ i ];
	header.style.height = h + "px";
}

This loops through the header-content divs, finding the tallest one. Then with that value, sets the height of both header divs. Works just fine.

In Flash, I'd have no problem using code for layout. But I'd love to know if there is some pure CSS way to accomplish this.

20 responses so far

Older posts »

Search
Speaking

No upcoming speaking engagements scheduled. What a shame.
BIT-101 Recommends
Archives
Categories
Meta

Search

Speaking

BIT-101 Recommends

Archives

Categories

Meta