Kinnetica

Using Screen on Mac OS X

2011-05-29T00:00:00-04:00

For the last week, I have been using GNU Screen to help me manage my terminal windows. Although there is a slight learning curve with Screen, there is one major advantage that more than makes up for the extra effort.

Suppose you want to SSH to a computer, start some long-running process, and not have to worry about keeping the connection open for that process to finish. Wouldn't it be great if you could just reconnect later and not only check on the progress, but also have all of your terminal windows in the same state as how you left them?

Here's a similar scenario that I ran into recently. Suppose you're running a script in the background that monitors a folder and compiles CoffeeScript files into JavaScript as the files change. If you simply ran the script from the terminal, the script would need to be restarted every time you closed the terminal window. What if you could start the script once and know it's still running in the background even if you've opened and closed the Terminal application many times since the script was started?

Screen is able to solve both of these problems simply and elegantly. Now, if I ever accidentally close the Terminal application or get disconnected over SSH, the state of all my windows and processes will remain the same. To me, that's a major selling feature.

Is Screen right for you? Here is a simple guide to get you started quickly and help you decide if it fits your workflow.

Getting Started

To get started, simply type screen. The first thing you will see is the startup screen, which you can dismiss by pressing either space or return. I explain how to disable this screen later in the article.

What you see afterwards should look very familiar. It's the same exact terminal you're already familiar with. However, you now have many different options that weren't available before. To see a list, you can view the help by pressing Ctrl-a ? (control-a followed by a question mark).

Creating and Naming Terminal Windows

Screen provides a couple useful ways of managing multiple terminal windows.

While in screen, type the command Ctrl-a " to see a list of open terminals. Currently, you should only have one terminal open, with the number 0 and a default name of the shell you are using. In my case, this is bash. Press enter to go back to your terminal. To rename this terminal, type Ctrl-a A. You should see a prompt appear at the bottom asking you to give the window a title. Call it Terminal 1. If you press Ctrl-a " again, you should see the terminal listed by the title we gave it.

Now, let's create two more terminals and give them different names. The first way to create a new terminal is by typing Ctrl-A c. Rename it one more time by typing Ctrl-a A and calling it Terminal 2. You should now be able to type Ctrl-a " again and see both terminals. You can use the up and down arrow keys or j/k to move between them.

Now let's create one more terminal and name it at the same time. You can do this by typing screen -t "Terminal 3". This will create another terminal named Terminal 3. You can check this by typing Ctrl-a ".

You can also use the -t flag to provide a number for the terminal window. For instance, screen -t "Terminal 9" 9 will create a new terminal window called Terminal 9 with a terminal number of 9. I will show you why this can be useful in the next section.

Navigating Between Terminal Windows

There are a number of different methods for navigating between windows. One simple way is using Ctrl-a n and Ctrl-a p. This simply switches between the previous and next window. Another method is by selected Ctrl-a [terminal-number]. For instance, to navigate to Terminal 9 that we created earlier, you can simply type Ctrl-a 9.

You can also have more than one terminal window open at the same time. To do this, split the terminal window using Ctrl-a S. Once you have split panes, you can easily switch between them using Ctrl-a [Tab]. Once you are in the second pane, you need to select the terminal you want to see in that pane. You can do this using any of the methods described above: Ctrl-a ", Ctrl-a n, Ctrl-a p, or Ctrl-a [term-num]. If at any point you want to exit out of split-pane view, simply navigate to the pane you want and type Ctrl-a Q. If the other pane doesn't disappear right away, it should get overwritten as you keep using the terminal window or you can type Ctrl-L or clear to reset the screen.

One cool feature is that you can use these navigation tools even while you have other programs open within your terminal. Try this example: open up a couple terminal windows and open vi in one of them. You should be able to navigate back and forth between the different terminals without having to close vi.

Detaching and Reattaching Your Screen Session

This is my personal favorite feature of screen. Type Ctrl-a d to detach from your screen session. You are now back to your standard terminal. Type screen -list. It should list that you have one screen session open. Type screen -r to reattach to this session. Once you reattach, you should see that all of the state of your terminal windows has been maintained. If you had more than one screen session open, you would have to provide the process id (PID) following screen -r to select which session you want to reattach.

It's important to note that you don't necessarily need to type Ctrl-a d to detach the screen session to use this feature. If you accidentally close the Terminal application while you have important work open (as I have done many times), you will still be able to reattach and resume your work if you were using screen.

More Tips

Removing the Startup Message

To remove the startup message, add the following line to your .screenrc in your home folder:

startup_message off

If the .screenrc file doesn't already exist, simply create it.

Recognizing Different Sessions

If you want to run multiple screen sessions at the same time, it's important to have a better way to differentiate screen sessions than by PID. To do this, start screen by using the -S flag. For instance, screen -S rubyterms will start the screen session with the session name rubyterm. This name will be displayed when you type screen -list and can be used as an argument to screen -r to start it back up.

Knowing Where You Are In Screen

To view which terminal you are currently using, you can use Ctrl-a i. If you always want to see the terminal you are on and all open terminals by default, add the following line to your .screenrc file:

caption always "%{= Wk}%-w%{= Bw}%n %t%{-}%+w %-="

Setting Up A Startup Configuration

A couple more small edits to your .screenrc can make sure that a few default terminals are automatically created and named for you on startup. Simply add a few screen -t lines in your .screenrc file. Here is an example:

screen -t "server" 1
screen -t "logs" 2
screen -t "ruby" 3
screen -t "coffeescript" 4

Exiting Screen

If you want to exit screen without detaching, you must simply exit all of the open shells by typing exit in each. After the last one is closed, screen will terminate.

Pretty Printing Minified JavaScript for Easy Reading and Debugging

2011-05-15T00:00:00-04:00

Having trouble trying to read and debug minified JavaScript in the browser? Don't worry. Newly added pretty printing in the Chrome Developer Tools is here to make it much easier.

For instance, here is a minified script being displayed within the Chrome Developer Tools:

By clicking on the curly brace ("Pretty Print") icon in the bottom left corner, the JavaScript is transformed into something that is both easy for humans to read and easy for setting breakpoints.

This feature is now available in both the Chrome Dev and Canary builds for Mac and Windows.

Google Analytics Can Now Track Site Speed

2011-05-07T00:00:00-04:00

Tracking and improving performance across your website just got a lot easier.

Google Analytics has added the ability to track page load times across all of the pages on your website. The option is not currently on by default, but it can be turned on by adding this method call to your Analytics tracking script:

_trackPageLoadTime();

More detailed information about setting it up and how it works can be found on this Google Analytics help page. Once your tracking code is configured, you will begin seeing statistics on the new Google Analytics site under the Content category.

No user likes to wait around for websites to load. With Google Analytics now providing developers with free and easy access to performance metrics, we can now take a more scientific approach in optimizing page load speeds to improve the user's experience on all of our websites.

First Time vs Serial Entrepreneurs

2011-05-01T00:00:00-04:00

In his post, Fred Wilson discusses his experiences with investing in companies with new vs. serial entrepreneurs.

The best first time entrepreneurs have been stewing on their idea for quite a while. It is a personal passion of theirs and they bring to it a fresh take, a stubborn insistence on their approach, and they obsess about the idea 24/7. They often get the right product into the market at the right time and they capture the user's attention and usage with that product/market fit.

Where first time entrepreneurs often struggle is when the product works so well that they have to quickly build a company to support the product. Most of the time, the first time founder has not spent anytime thinking about what kind of company they want to build, what kind of people they want to surround themselves with, what kind of culture they want to create, etc. The first time founder often has no experience recruiting, managing teams, and building organizations.

Serial entrepreneurs, on the other hand, often struggle with the founding idea and getting to product/market fit. They start the second and third and fourth company because they love startups and they don't know any other way to work and be productive. But they often lack that passion around a singular idea that drives first time founders.

There are two main components of every successful startup: a good idea and strong execution. When VCs invest in serial entrepreneurs, it's usually early on and the entrepreneur has usually already proven their ability to execute effectively on a good idea.

However, companies started by first time entrepreneurs have yet to prove that they either have a good idea or can execute it effectively. A lot of these companies will fail before ever getting to the stage when they could catch a VC's attention. However, if they make it past this point, they have already proven their idea works in the market and needs the VC for large amounts of capital to scale their idea effectively.

With these two points in mind, it makes sense that serial entrepreneurs need more help with the idea and product/market fit, while the first time entrepreneur needs more help with scaling the business (recruiting, managing teams, etc.).

[via Fred Wilson]

Better JavaScript Debugging Techniques

2011-04-20T00:00:00-04:00

JavaScript code is notoriously difficult to debug. It tends to fail very silently, and even when modern browsers are able to provide errors and line numbers, these sometimes tend to be unhelpful. As web applications are now relying on JavaScript for critical parts of its appearance and functionality, developing a powerful toolkit for debugging and testing JavaScript code is crucial.

Here are some tools I recommend:

Chrome Developer Tools

If you're using Chrome, there are many different tools at your disposal for discovering and debugging JavaScript issues. If something seems to be working incorrectly, simply open up the Chrome Developer Tools console (Cmd-Alt-J on a mac or View -> Developer -> JavaScript Console from the menu). You should see any errors, with associated line numbers, for the page you are currently browsing. You can see similar errors in Firefox by using the Firebug extension.

One new feature in Chrome is the ability to see a stack trace for each error. Just click on the arrow to the left of the error to expand it. This feature becomes more and more convenient as the complexity of your JavaScript program increases, and there are many different paths of possible execution.

Chrome Developer Tools also gives you the power to set breakpoints in your code under the Scripts tab. Simply select the JavaScript file you're trying to debug and click on the line number where you want to set the breakpoint. After reloading the page, Chrome will pause the execution of your script, let you step through it, as well as examine the state of your variables and DOM.

If breakpoints are not your debugging tool of choice, both Chrome and Firefox (with Firebug) support adding debugging statements to your code that get output to the console. To do this, simply use console.debug() and pass the variable you want to examine as a parameter.

Chrome has gone a step further and provided a few new console methods for you to use. One of these is console.assert(). This method is passed some condition as a parameter, which when evaluated to false, will print a complete stack trace. This can be very useful for validating any invariants in your code. Also, if you want to see a stack trace at any point in the program, you can now throw in a call to console.trace(). These new additions to Chrome, as well as some others, were explained in greater detail earlier today in a post on the Chromium blog.

The extensive features in Google Chrome's Developer Tools makes Chrome a very compelling choice for assisting in debugging all of your JavaScript code.

Jasmine

Jasmine is a testing framework for your JavaScript code. While JavaScript has never been a language that has traditionally received a lot (or any) test coverage from most developers, this is slowly changing. JavaScript is a much more serious language today than it was in the past, with the introduction of powerful frameworks, faster browser support, and AJAX. As the code we write becomes more essential to the application, we have a responsibility to make sure it's working correctly.

If you're a Rails or Ruby developer who has played with RSpec, you will feel right at home with the syntax. The Testing JavaScript with Jasmine railscast should get you up and running very quickly.

If you just want to try it out on a simple static site, look at the example provided in the Jasmine GitHub repository. Once you have all the files downloaded, you can just edit the SpecRunner.html file. First, include all of your JavaScript source files, followed by your test files. You should be able to see the results of your tests by simply opening SpecRunner.html in your browser.

JSLint

While JSLint is not necessarily meant for debugging, it is a very useful tool to make sure your code is clean and following best practices. Run your JavaScript through it once you're finished coding to see what it recommends. Certain design choices made in the JavaScript language tend to cause difficult-to-find bugs. JSLint tries to make recommendations that steer you away from making those type of mistakes. If you have trouble understanding any of its recommendations or don't understand the reasoning behind any of them, reading this page should help.

I hope these tips are useful to you. Please let me know if you have any JavaScript debugging tips or tricks of your own.

Automatically Generating Sitemap.xml Files For Jekyll

2011-04-18T00:00:00-04:00

Why Provide A Sitemap.xml File

Sometimes, crawlers just need a little help. Who can blame them? With hundreds of millions of websites on the internet for search engines to index, no wonder they might benefit from a boost. One way to help crawlers is by providing a sitemap.xml file. Not only does this file list all of the pages on a site that you want to make sure are indexed, but it can also provide useful metadata about each of these pages such as the last modified date, change frequency, and priority. While search engines are very good at finding your pages already, the metadata can be particularly useful, as search engines aren't as good at determining the relative importance of pages and how often to check for changes.

You can find a detailed explanation of the structure of sitemap.xml files and its metadata at the sitemaps.org site.

Once you create the XML file, you can use it for many different search engines. The simplest way to notify search engines about your sitemap.xml file is to include a reference in your robots.txt file. For my site, the entry looks like this: Sitemap: http://www.kinnetica.com/sitemap.xml. Google, Yahoo, Bing, and possibly other search engines will then be able to find the sitemap file and use it to help with indexing and crawling all of your pages and posts.

In addition, by signing up for their respective webmaster tools sites (Google Webmaster Tools, Yahoo Site Explorer, Bing Webmaster Tools), you can see which of the sites in your sitemap.xml have been indexed by each search engine. With Google Webmaster Tools, you can also let them know when your sitemap.xml has been updated and have them refresh their data.

Criteria For A Solution

When I started this site, I wanted to automate generating the sitemap.xml file. After reading the documentation on how to create Jekyll plugins, I decided to try to write a simple plugin that could generate this file for me.

These were my requirements:

It should automatically be able to find all of the posts and pages on my site and provide the URLs.
It should be able to automatically figure out the date the page or post was last modified. This is a little tricky, since a change to a layout file could change the output of many files (or possibly all of the posts at once). I decided to take the purist approach and calculated the last modified date by the latest date of either the page or post, or any of the layouts that it uses. However, I might change my mind later and simply use the last modified date of the post.
It should provide a way to exclude certain pages and posts if I don't want them in my sitemap.xml file. I am currently only excluding my atom.xml file.
It should allow me to manually specify the change frequency and priority for any page or post. By simply providing that information in the YAML Front Matter, the plugin should be able to pick up this information and include it in the generated file.

Give It A Try

I've completed my first version and wanted to get it out there for people to try. It's currently available for download on GitHub. I have provided instructions on how to use it in the README file.

If this seems like it might be useful for you, please give it a try and let me know what you think via email or twitter @kinnetica.

After all, it's not just the crawlers that can use a little help sometimes.

Jekyll - 7 Tips & Tricks

2011-04-17T00:00:00-04:00

Instead of going with Wordpress or Tumblr for this blog, I decided to try out Jekyll. I was very happy with the experience, and thought I would share some of the lessons I learned to hopefully make the process easier for others.

Jekyll has very helpful documentation available on their GitHub wiki. However, I found it hard to find all the available content simply by browsing the links on the wiki Home page. Once you have the basics up and running, I suggest clicking on Pages to see all of the available material. The mailing list is also a good place to go for help.
The documentation also has a listing of sites that were created using Jekyll. Almost all of them have code posted on GitHub. This is definitely worth sifting through to get a better idea of how Jekyll works and how it can be used to accomplish your vision.
While you're initially developing your site, it's very convenient to be able to see changes automatically as you make them without having to constantly restart the Jekyll WEBrick server. Make sure to either put auto: true in your _config.yml or start the server using the --auto flag to see your changes in real time. This is not the default behavior. Other customizations to your _config.yml can be found here.
While working on writing posts, there are two different methods for keeping posts from appearing when your site is generated. The easiest way is including published: false in the YAML front matter of that post.

Personally, I found it helpful to create a separate _drafts directory. This directory holds all of my unfinished posts. When the post is ready, I simply rename the file to reflect the correct date and copy it over to the _posts directory.
If you're going to install and enable pygments, make sure you remember that you will need to provide styles for syntax coloring. For my site, I experimented with some of the stylesheets found here. You will need to change the default class in the styles from .codehilite to .highlight.

One other cool feature with using pygments is the ability to add line numbers to your code. For instance, if you were writing Ruby code and wanted to include line numbers, simply surround the code with { % highlight ruby linenos % } and { % endhighlight % } (omit the spaces between curly brace and percent sign). If you don't want line numbers, simply don't include the linenos keyword.
If you are not yet familiar with Liquid, it's worth spending a little time getting up to speed. I've found the best resources to be the Liquid for Designers guide on GitHub and the documentation.
One of the convenient features of Jekyll is the ability to add metadata to all of your pages in the front matter section. By using the YAML key: value syntax, you can define your own custom variables and reference them within your site.

One use for this is being able to change the page title depending on the page being displayed. For instance, if you have Ham: Is It Superior To Bacon? as the title in the front matter of a post, having <title>{ { page.title } }</title> (omit the spaces between the curly brackets) in your layout file will set the page title to Ham: Is It Superior To Bacon? within that post.

Another clever use of this trick is to add a description and keyword custom variable on each post and page. You can then include these custom variables within a description and keywords meta tag in your template. The description will usually get picked up by Google and displayed in its search results. While Google ignores meta keywords, other search engines might still use them, so it might make sense to include them as well. Doing this will make it easier for search engines to display a relevant description and categorize all of your indexed pages.

The source code for my personal site is available on GitHub here. Feel free to use it to learn or as a starting point, but please make sure to remove all site specific code (e.g. Google Analytics snippet).

Kindle To Lead Ad-Subsidized Hardware Revolution

2011-04-15T00:00:00-04:00

You go online, you see ads. You turn on the television, you watch ads. You're driving on the highway, you pass ads. How often do you really get to make or save any money just for seeing ads?

Amazon recently announced an ad-subsidized version of its Kindle, which retails for $114 instead of $139. This results in a total savings of $25, or about an 18% discount. It is currently available for pre-order.

Knowing how Amazon operates, the ads will likely be well-designed and uniquely suited for the e-ink display. They will be much less distracting than the flashy, noisy online banner ads that we've all come to expect from web advertising. It's hard to imagine most consumers would pass up the savings, especially when the ads would cost them so little in annoyance.

From Amazon's perspective, this is a potential gold mine. Suppose Amazon sells a couple hundred thousand of the ad-subsidized Kindles within the first couple weeks or months. By losing $25 for each Kindle, they are earning the right to make ad revenue over the lifetime of each device. That's advertising over at least a year or two per customer for a measly $25.

Furthermore, this advertisement could easily be catered to individual users. Since Amazon already knows which books you are buying, it can charge advertisers a premium and serve up relevant ads to its users.

If you believe most reports that Amazon is making the majority of its revenue from the Kindle through e-book sales and that the profit margin on the actual device has become razor-thin, this makes perfect sense. If they can significantly reduce the price of the hardware for consumers, they can attract more customers and sell many more e-books.

I believe the 25 dollars is a conservative test for Amazon for this new business model. If it succeeds, the next stop would be $99, and possibly even lower. I would also not be surprised if the rumors regarding Amazon offering free Kindles to paying Amazon Prime members finally came true. Only it would be with the ad-subsidized model.

While ad-subsidized hardware hasn't yet established itself as a proven business model, other companies have considered similar ideas. There was an excellent article a while back on TechCrunch by MG Siegler about Google looking at giving away their Nexus One for free by subsidizing the device with ads. At the time, this plan was killed by the carriers.

If this model works successfully for Amazon, I suspect Google and other hardware companies will push harder to integrate this model into their products where it makes sense. Ad-subsidized phones and tablets would be the next logical step, leading to cheaper prices and even faster adoption.

For once, the possibility of having more ads in our lives actually seems exciting.

CSS Selection Attribute

2011-04-10T00:00:00-04:00

One of the lesser-known features of CSS is the option to style text selected by the user. This is achieved using the ::selection pseudo-element. Here is an example:

::selection {
  color: #000;
  background: #fff;
}

::-moz-selection {
  color: #000;
  background: #fff;
}

Firefox currently requires the -moz preface when using the element. This element will work on all modern browsers (Chrome, Firefox, Safari, Opera, IE9). There is no support for earlier versions of Internet Explorer.

Although a feature like this should be used sparingly, sometimes it can be used to produce good-looking results. An example of where this feature is used well is Paul Irish's CSS3 Please site.

The ::selection pseudo-element was originally written in the CSS3 draft spec, but was later removed. However, it has already been implemented in all major browsers and should continue to be supported in the future.

Note: Only the color, background, and background-color CSS properties will work with ::selection.

More Resources:

MDN Documentation About ::selection

Come In, We're Open

2011-04-10T00:00:00-04:00

Hello, there! My name is Michael Levin and I am a web developer living in the Washington, D.C. area. You can find out a little more about me by looking at my about and resume pages.

The main purpose of this blog will be to share my learning experiences related to web and software development and any resources that I find helpful along the way. I have committed myself to posting at least one new article a week.

I hope you'll stick around and learn along with me.

-Michael