Takaaki Kato

I'm a Japanese living in Tokyo. Email me at comments@takaaki.me or ping me at Twitter. You can also find me on GitHub.

By Takaaki Kato

Jul 14

Tasks

I do tasks. And my tasks are related to someone else.

The task comes to me from my friends, co-workers, boss or clients. Alternatively I start the task by getting the permission from such people.

When asked to do something, I can either accept or reject it. If I am undetermined, I can postpone my decision. This is the TextMate snippet I use for the purpose:

Hi ${1:Takaaki},

Thanks for your email. I'm very busy at this moment. I'll get back to you ${2:this weekend}. $0

All the best,

Takaaki
-- 
Takaaki Kato
http://takaaki.me

When I say no to something being asked to do, I use this snippet:

Hi ${1:Takaaki},

Thanks for writing in. Unfortunately I'm very busy at this moment, so I'm afraid that I cannot ${2:help you}. $0

All the best,

Takaaki
-- 
Takaaki Kato
http://takaaki.me

If I agree to do something, I explicitly define the date and time I finish the task by. I avoid ambiguity. Some words I don’t use are “today”, “tomorrow” or “this week”, “soon”, “as soon as possible”. These words are not specific. “Today” can mean the end of the work hour, or 11:59PM of the day. “This week” may be Friday or weekends. “Soon” and “as soon as possible” are no more important than filler.

Things don’t always work as I promised. Estimate is rocket science. I don’t have a PhD in the field, and everybody knows that I don’t have the degree. So I may need to ask for rescheduling the task. I could ask to cut the contents of the task and complete by the initially set deadline. Or I could ask for extending the time limit. In any case, I ask for rescheduling when I feel that I cannot complete the task in a scheduled timeframe. I also explain the reasons why I need to reschedule the plan.

Finishing the task doesn’t always mean the completion everyone agrees on. I need a shared understanding of what the completion of the task mean. Fixing a bug in code could be finishing by uploading the fixed code on a version control system, update the production server, and/or sending an email to someone who asked you to fix that. Sometimes you need a confirmation. I need some sort of action from someone who asked.

This is not just how you build money or business. This is about how I build relationship and trust with friends.


May 27

A Good Company

  • Everybody is a good writer (English and/or a language of stakeholders). Everyone avoids any grammar errors and typos.
  • Everybody has his or her own blog whether or not the topic is tech-related.
  • Everybody learns the wiki syntax of the wiki engine they have chosen.
  • Make a wiki with minimal content and keep it up-to-date. Wiki with obsolete content is useless. A company or team considers a 10 min wiki cleanup time for each week.

Productivity

Everybody is a productivity hacker. Always share tips and tricks to increase the productivity in the company in general. Not necessarily about programming, but about everything the company is involved in. (Gmail, email clients, phones, communication with clients and so on in the team.) Make company cheat sheets or a productivity wiki.

Communication

  • Every programmer/developer learns to communicate directly with the stakeholder. Reduce the burden on the manager. If there is a basic agreement about, for example, a new feature, some of the details can be directly talked between developers and the stakeholder. That is, each developer establishes trust with the stakeholder a little by a little. (This is quite difficult, but hiring a manager is more difficult. A company needs to educate programmers/developers.)
  • Every developer is a good communicator. Loves to write a blog, attend workshops/conferences, and speak at conferences.
  • Every developer is supportive for business/sale people learning the wiki, bug trackers and other tools.

Money and Time

  • Time is money.
  • Don’t waste your time because you are wasting money.
  • Budget means both time and money.
  • Calculate how much a meeting costs.

A hosted Solution vs. A Company Hosted Solution

A company hosted server is good if many of the developers are good at servers. But with few good at servers, it will take time to fix a problem when a problem occurs. The company is still paying time for the server guy. The server guy needs to stop his work to fix the server. Using hosted solutions (Google Apps, GitHub, Basecamp) might be cheaper solutions. Always consider how much you are paying for each developer an hour.

Programming Practices

Consider Extreme Programming Practices where possible. (Don’t have to follow everything.)

Pair Programming

Pair work/programming is encouraged. The number of programmers should be even. If a developer with good skills doesn’t share his knowledge, the company itself cannot benefit fully from the knowledge. If he or she leaves the company, the others will be left alone without necessary skills. (If you are not pair-programming and want to secure a job, write code that is complex and nobody can read. You will never be fired.)

One of the big obstacles of pair programming is occasions where your partner is absent.

Even office work can be done in pair. A small company needs sharing of knowledge and skills. Pair work encourages communication between workers.

Test-Driven Development and Behavior-Driven Development

They are often called TDD, BDD respectively.

TDD/BDD reduces anxiety and stress from programmers. Produces fewer bugs, and find and a bug quicker.

Web Development Practices

  • A programmer is willing to learn (a) learning more server/low-level development or (b) more frontend technology. (a) is mainly for security and network/server/database performance while (b) is for more Ajax, CSS and ActionScript, Flash, Flex, AIR.
  • A graphic designer is willing to learn more frontend development (CSS, JavaScript and basic programming and different template systems).
  • A developer tries to learn about finance/company management a little by a little.
  • Always keep in mind that developers work on cool languages and frameworks. The language and frameworks will evolve over time. Don’t forget to include the time for keeping up-to-date with the language and framework the company is using. That should be included in estimate. Nothing is worse than joining a team and notice that the company is using a very old version of a very cool framework.
  • Don’t use notebooks without an extra keyboard (and an external screen). RSI is killing people.

Hiring

  • A company encourages developer’s activity. Open-sourcing a company internal plugin is a big plus for recruiting another hungry developer. If letting employees speak in conference, the company needs zero yen for recruiting. Good people come to the company.
  • Everyone is involved in the hiring process even when the decision on hiring is not based on everybody’s agreement. Everyone learns to be a better job interviewer.
  • Every employee has a hobby other than programming/designing. Thinking only about a job 7 days a week doesn’t last. Good leisure time makes good concentration time at work. If you are workaholic, set a time limit. Ask what’s his or her pastime in a job interview.

Business

Understanding the whole company as a team is critical. Developers try to understand more and more about business. Business people, on the other hand, try to understand more about developers, by avoiding mass emails, guarding their attention and learning how to use tools such as bug trackers and wiki.

Consider incorporating some practices from Rails Maturity Models.

  • Get things done. A company gets money by delivering. The development process doesn’t yield to money. Everyone in the team considers delivery over process.
  • Non-flexible hours are encouraged. Otherwise, people working early end up with receiving calls and getting packages. There’s no time to concentrate on early hours. A company should set business hours and put that information on the website, and ignore any phone calls before/after the hours. A company could have a lunch break, where no phone calls are taken.
  • Each task should be S.M.A.R.T.
  • Be influential to other companies. Have a company tech blog or lab blog.
  • Non-smoking. Allowing smoking is kicking out those pregnant.

Emails and Other Communication Tools

  • Don’t abuse BCC.
  • Write a better (e.g., concise, meaningful, well-formatted) email. Use spell checkers for any emails. Bottom-posting is encouraged. Use plain text emails.
  • If you send any off-topic emails, you can start a title with distinction such as “[OT] Funny pictures” or “[Inspiration] Elegant examples of forms built with jQuery” Decide such “tags” in your team.
  • Don’t assume that developers check their email every 5 minute. Set a rule on how often or when emails should be checked.
  • Don’t allow employees to check their private emails and RSS or surf websites in work hours. Pair programming solves this problem. If your employees spend 8 hours with good concentration, they will have plenty of time to spend on private things. Of course, some breaks are needed during the 8 hours where employees can check private emails.
  • Fewer emails. Everyone refrains from unnecessary emails. Always send an email only to those who need it.
  • When Skype is used, everyone makes a new account for usage during work.
  • Build a communication central. Wiki, Basecamp, Campfire, presently. Discuss with everyone. Don’t let specific people decide. Use the system. Don’t complain about the system that everyone decided upon.
  • Make a rule for which kind of information can be transmitted via which method (e.g., email, phone, Skype, Basecamp, Backpack, Campfire). Write the rules in the wiki so that a new hire can learn about the rules quickly without interrupting others.
  • Guard attention from programmers. Programming/designing requires concentration. There should be a rule on who is in charge of getting calls. If every developer needs to try to answer a call, it’s a complete waste of time. Coming back to the state of mind of concentration takes about more than 10 minutes.
  • Consider using Twitter-for-enterprise solutions. Yammer and Present.ly
  • Have a dedicated time for direct communication. 50 minutes for working on their own tasks and 10 minutes for direct communication with others. Developers then secure their attention to their tasks for 50 minutes.

Equipments

  • Allow developers’ machine HD to be clone-backuped up. Reinstalling the OS and every tool takes time, and the company is paying for the time as well. External HD’s are inexpensive.
  • Coffee and water server (LOW PRIORITY, but if your location is not close to a vending machine or a grocery store, it will be time-saving.)
  • Different people have different tastes and flavors. A chair, a desk, a screen size, OS, a text editor, mouse… Ask each developer and find out if there’s anything that can be improved. What you think is the best is not always the best for everyone else. (Needless to say, online tools are important as well.)
  • Headsets are essential for those responsible for getting calls.

Ruby

  • Ruby at ThoughtWorks. (Of course, Ruby doesn’t solve every problem.) Python is a dynamic language, too.
  • Choice of languages and frameworks doesn’t matter to customers in most cases. Pick solutions that are fun and energizing to employees, not to employers.

Postscript

Not everything of what I mentioned above applies to a company. Flexible hours does have an advantage, and remote workers have some advantage. Coding solo isn’t bad at all. I am lacking in arguments from the management side. I wrote this with a company of 5 to 30 people in mind. I am spending each day to be as much efficient and productive as I can in doing anything. Group/organiization productivity is harder to achieve than personal productivity.

In summary:

  • Share your knowledge and skills with others.
  • Be productive, but help productivity of the company as a whole. You are not the only one to work in the company. Don’t disturb each other.
  • Time is as important as money.
  • Consider how much each developer cost per hour.

May 14

Review: Getting started with Audacity 1.3

Listening to podcasts is a daily activity for me, replacing the old ways to receive information such as watching TVs and reading magazines. I always wished that I could create a podcast on my own, more specifically screencasts, where I record my screen and my voice that explains what I do on the screen. Learning both audio and video may be too much for a start, so I wanted to learn just audio first. I luckily received a review copy of “Getting started with Audacity 1.3” from Packt Publishing. So I’m writing a review on the book here. Audacity is a free open source audio editing program, which works on Mac, Windows and Linux.

What’s the most intimidating about audio editing software is its interface. You can find a lot of audio editing software, but none of them looks intuitive. One reason you think so is that you don’t know about digital audio itself. I could understand some of the interfaces such as the playback button and the record button, but everything else is incomprehensible. Audacity is not the exception in that regard. What is worse, Audacity is cross-platform open source software. What’s wrong with “open source” and “cross-platform”? The user interface of most of such software are terrible. A platform-specific program may have a guideline to follow. For example, Apple has a human interface guideline. But it is impossibly difficult to do the same for open source cross-platform software for a few reasons. Some are purely technical and others are more of cultural and political. It is difficult to find an interface designer that contributes to the open source community. As a result, programmers create everything.

The book introduces Audacity of this complexity and confusion in a very easy-to-follow manner. Throughout the book each platform (Mac, Windows and Linux) is well taken care of. For example, a) installation of Audacity, Skype (used to record the audio), Audacity plug-ins and b) keyboard shortcuts are explained well enough for each OS. I didn’t need to spend a time on Google at all. After explaining installation and basic usage, the author introduces a sample project. That is making a podcast with the audio you record with a Skype interview. From recording to publishing. The final outcome is really a podcast. The author introduces how to add background music, export the entire audio and publish to the iTunes. So remember that this book doesn’t end with very basic cutting and pasting. You will learn different techniques to make your audio more professional including how to remove the noise, adjusting the audio level strategically and softening annoying sounds like “sh” and “ch”.

There is no required knowledge to read the book. The author avoids jargons where possible, and, when a term is introduced, she explains it in details. Additionally, the glossary of terms is placed at the end of the book. The language used in the book is simple. No dictionary is necessary. Many screenshots visually help understanding. All the screenshots are taken using Mac, but the author reminds the reader of potential differences across the platforms. I’m sure users without access to Mac can go through the book without a hassle.

Even if you are already an Audacity user, you’ll find explanation of effects quite useful. However, unfortunately this book is not meant to be a comprehensive guide for every single feature in Audacity. When I browse through all the menu items, some items aren’t mentioned in the book. For example, generators and sound activation are not refered to.

In summary, the book explains the basics of Audacity very well for beginners and intermediate users. After finishing the book, you will have a good understanding of its interface and usage, which is complicated by nature. The interface ugliness won’t change, but the interface doesn’t intimidate any more after you finish this book.


Apr 20

Review: Firebug 1.5: Editing, Debugging, and Monitoring Web Pages

One of the indispensable tools in developing web applications is Firebug. Firebug 1.5: Editing, Debugging, and Monitoring Web Pages by Chandan Luthra and Deepak Mittal from a publisher, Packt Publishing, is a general walk-through about the tool. While there are many Firefox add-ons, Firebug deserves as one whole book to talk about, and web developers might want to learn more about it. Firebug is so popular that even people who don’t even use Firebug install it. Having installed and having been using Firebug doesn’t at all guarantee that you are making use of it. It is like using an operating system. Many use a Mac and/or Windows. How many of them take advantage of it? I had an opportunity to receive a free review copy of the book, so I would like to write a review on the book.

The language used in the book is clean, plain and straightforward. No joking, no snobbish English. It is certain that non-native speakers of English can understand the text without a problem. This text can be taken as essentially complementary for many problematic screenshots appearing with the text. (The issues pertaining to the screencasts will be discussed later.) The book will bring you tons of I-didn’t-know-that experiences for current Firebug users. The book illustrates usage about Firebug. It’s not just about JavaScript. It discusses HTML, CSS, DOM and Ajax. Each tab on Firebug is carefully and satisfactorily explained. You will find many features that are often difficult even to notice. For example, are you familiar with:

  • how to read the output of profile,
  • how to auto-complete when you edit a node in DOM,
  • how to read all the color bars in Net tab,
  • console API, which offers more than just console.log(),
  • how to set conditional breakpoints,
  • how to search multiple files in CSS tab, and
  • how to filter user-defined properties, user-defined functions, DOM properties, DOM functions and DOM constants in DOM tab?

For those new to Firebug, this book serves as an excellent introduction while the book is still worthwhile reading for those who haven’t dug into the possibilities Firebug offers. I’m not sure if all the features are covered in the book, but I can safely say that the book covers most of them.

What’s noteworthy along with the clear explanation of Firebug usage is that the book goes beyond the scope. First, the book also discusses useful Firebug extensions. Firebug itself is expandable by its extensions. This is not just a list, but the authors explain each extension adequately. You can easily find many “must-have” lists on blogs, but each item is rarely explained in enough details on blogs I can find on the web. The extensions discussed in this book include:

  • YSlow
  • Firecookie
  • Pixcel Perfect
  • Firefinder
  • FireQuery
  • CodeBurner
  • SenSEO
  • Page Speed

The other impressive points about the book are: a) explaining how to make a Firebug extension and b) future for Firebug. I personally don’t plan to write a extension for Firebug, but a “Hello World!” example in the book gives a kick-start for those interested. The plans for versions 1.6 and 1.7 are neatly summarized. It gives you a good understanding of what Firebug will be able to do, what challenges Firebug is currently facing. Again if you consider developing an extension, the topics referred to in the section is no doubt beneficial.

Reading through the book, I have noticed lack of information about usage with JavaScript libraries. While one of the authors, Chandan Luthra, claims that he is fond of writing code in jQuery and Firebug. If you have ever used jQuery and Firebug, you might have noticed that Firebug has $ function, which jQuery also has. Which has a precedance? Do we see an error? Why? Nothing is referred to. jQuery is, in fact, presented in the book when the authors discuss Ajax calls. It might have been helpful to include any relevant information that could confuse JavaScript libraries users because a lot of the JavaScript coding happens on the library level.

Some editorial errors have been noticed. First, the screenshots on the PDF were quite blurry. It was impossible to read text in the screenshots. If you don’t have access to Firebug, this is a big issue, but fortunately both Firefox and Firebug are available for free and work on many platforms. If you cannot see the screenshots clearly, I suggest you actually download the code and follow the instruction to see what really happens. Second, keyboard shortcuts on the book are for Windows and Linux. Shortcuts for Mac are not mentioned. I am personally okay because I’m used to this situation as a guy using a Mac about a decade. If the publisher is serious about selling the books on web development, it is vital to take care of Mac users. Just randomly find any screencasts made by and for frontend developers. Many use a Mac as their primary development machine. This may sound trivial, but it tells me if the publisher is keeping up with what’s happening to web developers. If a publisher doesn’t get a trend among developers, how does the publisher make good books?

HTML examples shown in the book made me wonder if the authors are experts on the field. There is one instance when a tag name is spelled in capital letters (i.e., <HTML></HTML>). I haven’t seen this style for ages. But the biggest surprise was a font tag (i.e., <font face="monospace>"> ). Even for a discussion purpose, nobody uses the tag any more. Making a font type to monospace in CSS is much easier. If you work with teens, they don’t really know about the tag. I’m serious. In addition, indentation of the code is sometimes inconsistant. 4 column space was observed for the most of the code, but the rule was broken at some examples. This leads me to a question of whether I should buy a web development book from this publisher or not. Maybe this was entirely made by the authors, but why didn’t any reviewers point out the issues?

There was one passage I found particularly hard to comprehend. In explaining debugger features in Script tab, the authors write as follows:

  • Continue (F8): Allows us to resume the script execution once it has been stopped via another breakpoint
  • Step Into (F11): Allows us to step into the body of another function
  • Step Over (F10): Allows us to step over the function call
  • Step Out: Allows us to resume the script execution and will stop at the next breakpoint

(Emphases in original.)

The authors explain “Step Into” by using the phrase “step into”. It doesn’t explain what “step into” actually means. The same applies to “Step Over”. These terms may be familiar with those who have an experience with another debugger, but, all in all, the passage above explains nothing.

The bottom line: Firebug is a popular tool and it might be easy to find information on the web. With my experience, however, the quality of the explanations I read on the web is quite low, and they tend to be inadequate. This book provides a comprehensive yet friendly explanation in a digestible fashion for both new and existing Firebug users about its usage. As well, the book offers additional information that extends its usage. Despite the problems I identified above, this book is worth reading for many people.


Apr 10

Working with TextMate: April 2010 Edition

TextMate is still a popular text editor for Mac. Here are my suggestions for those who are still with TextMate.

General advice for everyone

A better project drawer

First, replace your project drawer with ProjectPlus. The replacement has additional capabilities like version control status for each file. It currently supports Bazaar, Git, Subverion, Mercurial and Svk. The drawer is placed at a side where you want to have instead of having you find the drawer at a random side everytime.

Validate syntax upon saving

Second, if you edit a file, you save it. Seeing error messages and warning messages when saving a file saves a lot of time. Validate on Save bundle shows you the messages as soon as you hit ⌘S. The supported languages include Ruby, Python, PHP, SASS, HAML and JavaScript.

Working with remote files

ExpanDrive allows you to mount a remote server on your Mac. So that you can work with the files in the servers using TextMate. ExpanDrive is available for $39.95.

Working with large projects

Exclude some files and directories from search results

Searching in a project takes time when you have a lot of files in your project. One way to speed up the process is to make TextMate ignore some files and directories. If you are working with a Rails project, you could exclude vendor/rails directory from your search. You can set your search patterns at “Preferences” → “Advanced” → “Folder References”. Dr Nic shares his snippet of the pattern. If you are using Yahuda Katz’s Bundler, take a look at this Stack Overflow question.

Swiching between files with a Command-T replacement

⌘T (“Go to File …”) is quite convenient, but it’s still a bit of pain to find the right files. GoToFile tmbundle brings Jamis Buck’s Fuzzy Finder library to TextMate. A better algorithm for search, better UI, more keyboad shortcuts and more configurations. The command is assigned to ⇧⌘K.

Speed up search with ack

Another common problem for TextMate users is still about slow search. A few improvements can be done by using a bundle or a plugin. The first bundle is Ack in Project bundle. Instead of using TextMate default search, you can rely on power of ack. Ack is a command line utility like grep, which takes advantage of Perl. There is a plugin version of the bundle by the same author. It’s called AckMate. The plugin fits better in OS because it shows the results in a Cocoa window instead of TextMate HTML Preview window. If you use any of the ack tools, be aware that ack doesn’t search every file by default. Most notably HAML files are excluded from the search. Do read how to make ack to search different types of files.

Disable automatic file refresh with ReMate

The last problem I would like to address is lagging when you switch your focus from another app to TextMate. TextMate automatically refreshes files in a project when it regains the focus. For example, when you switch to a different branch in Git in Terminal and switch back to TextMate by ⌘⇥, TextMate refreshes the files in the project. If your new branch has completely different files, file contents and directory structures, TextMate needs a little time to show you the new branch. In such a case, some of you might want to disable this automatic refresh of files. ReMate prevents the automatic refresh. Both ProjectPlus and ReMare are written by Ciarán Walsh.

Working with Ruby and Ruby on Rails

Here is a list of TextMate bundles available for Ruby-related projects. This list is not exclusive, but I hope that this will get you started. Some bundles that come with TextMate itself are outdated. You need to grab the bundles for yourself.

I would suggest that you always keep looking for bundles that are actively developed. Search GitHub and be aware that most of the projects have a name “.tmbundle” at the end. Keep up-to-date with the bundles you installed.

Dr. Nic has a Twitter account dedicated for Rails bundle. Follow to get updates.

Working with JavaScript: node.js and jQuery

We all use JavaScript. JavaScript is getting more and more important as it is recognized as a server-side language. node.js bundle will be helpful for those who are learning how to node.

On a client-side, jQuery is perhaps the most popular library. jQuery bundle and jQTouch bundle save time on writing jQuery. Another remarkable tool for JavaScript is JavaScript Tools bundle created by Thomas Aylott. It has various commands such as a) validate syntax, b) compress JavaScript with Dean Edwards Packer, YUI! Compressor and Google Closure Compiler and c) validate with JSlint.

Working with PHP: WordPress and Drupal

Even if you work on Rails primarily or if you want to work on Rails exclusively, there are still many jobs around the PHP market. A blog engine, WordPress and a CMS, Drupal are by far most popular platforms on their own fields.

Some TextMate bundles help working with these two platforms. Do check out PHP Drupal bundle and WordPress bundle. They are not just a bunch of snippets, but they come with some really helpful commands. Don’t forget to read “About…” in WordPress bundle and “Help” in Drupal bundle.

Miscellaneous things you might not know about

TextMate has its own command line tool called mate. To install, visit “Help” → “Terminal Usage …”. Run mate -h to see options available. Read the section of the manual “Calling TextMate from Other Applications” for further details.

TextMate can be used when editing text areas in other apps like Mail and Safari. Install “Edit in TextMate” input manager from “TextMate” bundle. That is a bundle called “TextMate”.

Some Emacs key bindings work in TexMate as long as they don’t conflict with TextMate and its third-party bundles. Default OS X key binding can be found here. Some conflicts may happen. For example a lot of bundles assign ⌃H for help or looking up word in documentation. Ruby on Rails bundle assign ⌃P for params[...] and ⌃F for “Jump to Method Definition”. Even though this is a little annoying, you can always change the shortcuts any way you want.

I see some people on Twitter deplore the lack of column editing in TextMate. But as many others know, it does have column editing capability. Read the sections of column selections and column movement typing in the manual.

If you are overloaded with bundles or if you have bundles you never use, just hide them. You can hide any bundles, but I would highly suggest you keep “Text” bundle and “TextMate” bundle, both of which have core functions in text editing.

When you press ⇧⌘T and type some characters, the matched items available only in your scope show up. You can use capital letters if you want to run an item that is not available in your current scope.

“Filter Through Command…” (⌘⌥R) is often neglected. You can pass any command to work with your files or current selections. What this means is you can use awk, sed, grep, sort, ruby, python and even php to process text. Use the most familiar tool for you. Read the relevant section in the manual.

What percentage of the TextMate users understand the shortcuts like ⌥F2 and ⌃S? ⌃S invokes incremental search, which is often quicker than bringing up a search window. ⌥F2 shows a context menu. Now you can correct spelling errors without using a mouse. For the often ignored keyboard shortcuts, visit “List of Standard Key Bindings” in the manual.

Finally read the manual. The manual is located at http://manual.macromates.com/en/. The manual is well-written. Ask questions in the mailing list. Twitter isn’t always the best place to share your problems.


Mar 22

Making the most of Firebug

Firebug is one of the must-have tools for web developers. It comes with many features you might not even notice. The official website of Firebug has good explanations about each feature and has some screencasts. (There is only one screencast right now, but more screencasts are coming according to the website.) The website is useful indeed if you are looking for how to use Firebug. I cannot emphasize this point enough because, to my surprise, so many people haven’t visited and read the helpful information on the official website. Firebug 1.5: Editing, Debugging, and Monitoring Web Pages is a new book from Packt Publishing due next month.

Along with the basic features, Firebug has its own extension systems. Currently 36 extensions are listed on the wiki. I particularly like FireRainbow, which enables syntax highlighting for JavaScript, HTML and CSS. Another extension I want to mention is SenSEO. Although I am not paranoid for SEO, it gives me an good overview about how the rendered HTMLs can be evaluated from an SEO perspective.

YSlow is a popular extension by Yahoo!, which analyzes web speed and gives improvement suggestions. Google has its own speed analyzer extension, called Page Speed. I haven’t looked into it much but it has some unique features that YSlow doesn’t have. As my job is not just optimizing websites for speed, I now use YSlow mainly for now. It should also be noted that a lot of speed improvements can be done on backend by optimizing database. There’s a Firefox add-on, lori that shows basic information like the number of requests, page size and load time on status line. If an entire request takes more than 5 seconds to load all the files to be ready, something is wrong to me. The number of seconds may vary depending on your application and your Internet connection.

jQuery is probably the most popular JavaScript library as of today. It has a concept called jQuery object, which hides many complexities from developers. FireQuery is a Firebug extension that adds jQuery object information into Firebug as well as a few other functions like jQuery Lint integration.

jQuery is used everywhere. It’s officially used in WordPress and Drupal, both of which are the most popular tools for blogging and CMS respectively. Microsoft recently announced their plan to contribute to jQuery. Knowledge and skills of jQuery are becoming more important than ever for developers. There are essential tips I want to share regarding jQuery development.

Firstly, load the jQuery file from CDN. There are three CDN providers for jQuery (i.e., Microsoft, Google and jQuery.com). It is apparent that Google’s is the most common as far as I surf the web. Use Google’s Ajax Library. Secondly, run JSLint. A lot of bugs can be prevented if you follow JSLint. JSLint warns your usage of bad parts of JavaScript. Coding only using Good Parts will reduce careless mistakes and make code more consistent and readable. Lastly, jQuery Lint reports erroneous usage of jQuery. Following JSLint and jQuery Lint sound like shackles of “Best Practices”, but at least for me, they give me a good starting point for writing good code. By the way jQuery Lint project is still in the early stage. Use it with care.


Mar 21

CSS Border Radius with jQuery Sliders

I just made a small DB-free web app that helps you to find the right snippet of code for border radius you can create with CSS3. The border radius properties basically create rounded corners. While there’re many ways to generate rounded corners with using graphics, it has been made easier for developers who can use the new CSS properties.

The problem with these properties is that implementation in browsers. Webkit-base browsers (e.g., Safari and Chrome) have a vendor specific property. Mozilla Firefox also has its own. As with any vendor specific properties, the property names start with -(minus sign) (e.g., -webkit- for Webkit and -moz- for Mozilla). Opera, unlike the browsers mentioned above the official CSS3 property.

IE doesn’t seem to work with these properties right now. But it doesn’t mean adding the properties causes a side effect. IE users just see the rectangular without any rounded corners. If you want to use the CSS border darius and want to target IE users, build a bearable design without rounded corners for IE users.

The upcoming version of IE, which is the version 9, is an exception. While it hasn’t been released to the public, IEBlog mentions the support of the CSS3 way instead of using a vendor specific property.

I am hoping everyone will remove the vendor specific properties and use the CSS3 version to make developers’ life easier.

The application is made by me, but the ideas are originally from CSS Border Radius and a suggestion from Dan Benjamin. If you are a developer, it’s worth reading his blog and some of his podcasts. I open-sourced the code on GitHub. Please take a look at the code and give me any suggestions.


Feb 2

Setup

This article is heavily inspired by The Setup, a series of interviews with influential people on the web about what hardware and software they have and how they use them to get their work done. Acknowledging that I’m just a nobody, I would like to share what I have and how I use them.

Hardware

My first computer was a Mac. A lot ask me why I picked a Mac over the other. If I remember correctly, I did not care at all what other people have. Instead, I was hooked on and fascinated with what I saw at a store, iMac G3/400 DV SE. That was in 2000. Since then I have been using Mac exclusively. I try to be as simple as possible and own and use as few things as possible. My current main and only computer is a 13-inch MacBook, I bought it at online Apple Store with Built To Order. I chose Solid State Drive (SSD) over Hard Disk Drive, and a US-keyboard layout over Japanese one. I’m impressed and content with SSD performance. Making clone backups with SuperDuper! has never been faster. For instance, Smart Update with SuperDuper! of the entire disk that includes my FileVault encrypted home folder takes less than 20 minutes. In addition, booting the system takes less than 30 seconds. As a result, my Mac launches faster than my iPhone though I rarely turn off my iPhone. I hook up the MacBook to a Dell’s 24-inch display at home. Being connected, the MacBook lid is kept closed. I use them with Apple Wireless Keyboard and Logitech VX Nano Cordless Laser Mouse for Notebooks. Not exactly hardware, but I always buy AppleCare Protection Plan. AppleCare for notebooks is global, and the premium support from Apple runs 3 years. I have three LaCie external hard drives for data storage and backup. That is it. I don’t own any other computers.

I have an iPhone 3G, but I’m not a heavy user.

Software

I write code, blog posts, email and love letters in TextMate. TextMate is an amazing text editor and a platform for many different solutions with a vibrant and supportive community. When I ssh into other boxes, I use vim. But I found that ExpanDrive can mount remote drives on Finder, thus allowing me to use TextMate to edit remote files. I keep my code and writing on GitHub, and I use GitX for visualization and committing. In Terminal I use zsh. I’m not entirely convinced, but many suggest that I use GNU Screen, so I’m playing with it now. I maintain Windows, CentOS and Ubuntu on VMWare Fusion, thus being always a few clicks away from the three OSes. The performance of the OSes are outstanding thanks to the speed of SSD.

I back up with SuperDuper! almost daily and weekly. SuperDuper! is the only app I call “a must-have for every Mac owner”. I also use Dropbox for backing up some casual stuff. Yes. I do encrypt files before the backup. I use OS X’s Disk Utility or BetterZip for compression and encryption.

I use Yojimbo for item collection. NetNewsWire has been my best friend over the years. LaunchBar replaced the position of Quicksilver a while ago, and I never regret it. TextExpander has saved many hours of typing and my everyday typos. What I do in my life is neatly organized in The Hit List. iStat Menus monitors health of my Mac 24/7. 1Password generates, organizes and maintains most, though not all, passwords.

Firefox is my browser of choice. I use it with Vimparator, enabling vim-like keyboard navigation on the web.

The only third-party essential app for my iPhone is WriteRoom. I sync the notes in WriteRoom with SimpleText.ws.

Dream Setup

The annoyances I face are frequent needs of changing batteries of the wireless keyboard and mouse. The keyboard needs three AA batteries while the mouse requires two AAA batteries. Although both keyboard and mouse show a low battery alert, I don’t want to worry about the stock of fresh batteries at home. I will invest on rechargeable batteries like eneloop.

With the adoption of FireWire 800 for Apple notebook lineup, I would like to switch my old FireWire 400 harddrive to a FireWire 800 compatible drive. Currently I’m using a 6-pin to 9-pin converter, which is hideously ugly.

With respect to software, I am, with many others, waiting with bated breath for TextMate 2.0. But I can keep enjoying learning more about TextMate rather than spending time on complaining for unknown release schedule.

I use Mail along with SpamSieve. I’m dissatisfied with current options for email for many reasons. But I’m thrilled with the recent initiative of the Letters project, which addresses issues I concur with.

On the road I wish I could sync my The Hit List data with my iPhone. The Hit List for iPhone is in the pipe, and I am certain that the release of the app will impact my workflow drastically.

I cannot stop thinking about my dream setup, but admittedly I doubt that I’m using everything I have most effectively. Learning more about scripting, especially AppleScript, is more meaningful to improve my productivity than burying myself in dreaming.


Dec 20

Assign each commonly used app with 3- letters

Used with LaunchBar and its Instant Open feature. Should work with other apps.

  • AB => Address Book
  • AD => Adium
  • AM => Activity Monitor
  • AZ => AppZapper
  • BAL => Balsamiq Mockups
  • COT => CotEditor
  • COL => Colloquy
  • DI => Dictionary
  • DU => Disk Utility
  • F => Firefox
  • GX => GitX
  • I => iTunes
  • IC => iCal
  • IP => iPhone
  • KA => Keychain Access
  • KEY => Keynote
  • M => Mail
  • MA => TextMate
  • MP => Mailplane
  • NN => NetNewsWire
  • NU => Numbers
  • OG => OmniGraffle
  • P => Preview
  • PAG => Pages
  • PAS => 1Passsord
  • PS => Photoshop
  • Q => QuickTime
  • Q7 => QuickTime Player 7
  • S => Safari
  • SF => ScreenFlow
  • SD => SuperDuper!
  • SKY => Skype
  • T => Terminal
  • TE => TextEdit
  • THL => The Hit List
  • TRA => Transmit
  • VIM => MacVim
  • VLC => VLC Player
  • VM => VMware Fusion
  • Y => Yojimbo