kongkong's Blog

No Silver Bullet --- Computer Language is just a tool.


| Comments

最近在做飞思卡尔的android方案,根据User Guide需要在ubuntu下编译android,根据我以往做嵌入式的经验,按照文档一步步来。在这过程中的一些坑与解决方法纪录如下:

  1. 在Mac OS X下直接编译,在为android打飞思卡尔的Patch的时候会出现错误。通过VirtualBox+Vagrant的方式在mac中ssh虚拟机的方式,在打patch的时候也会报错。解决方法:直接在另外的一台电脑上安装ubuntu 64位(文档上建议64位)。
  2. 公司新购买了一台Acer笔记本,通过liveUSB安装ubuntu,在进入ubuntu安装界面时候出现黑屏。解决方法:因为acer默认亮度为0了,通过FN+亮度来调节笔记本的亮度。:)这个问题确实很隐秘啊,我还以为是acer无法安装ubuntu来着。
  3. 编译android需要的前提条件,见http://source.android.com/source/building.html.其中需要安装JDK6,饶了一圈找到的直接通过apt-get 安装方法:
$ sudo add-apt-repository ppa:webupd8team/java

$ sudo apt-get update

$ sudo apt-get install oracle-java6-installer


AOSP: Android Open Source Project.是纯净版的android开源代码。

AOKP: Android Open Kand Project.在Android社区中,Kang是一个术语,即用来表示这是一个被他人修改过的ROM。

CM ROM:CM 是CyanogenMod 的简称,Cyanogen团队是全球最大的第三方ROM编译团队,覆盖机型范围相当之广,几乎所有热门机型都有相对应的CM ROM可以刷机使用。国内知名ROM作品 MIUI 早期也是直接采用了CM 的源代码,才能迅速在多个机型上普及。

make clean mrproper distclean的区别

clean - Remove most generated files but keep the config and
enough build support to build external modules

mrproper - Remove all generated files + config + various backup files
distclean - mrproper + remove editor backup and patch files

make dist 将所有的程序和相关的文档打包为一个压缩文件以供发布


ccache is a compiler cache for C and C++ that can help make builds faster. In the root of the source tree, do the following:

$ export USE_CCACHE=1
$ export CCACHE_DIR=/<path_of_your_choice>/.ccache
$ prebuilts/misc/linux-x86/ccache/ccache -M 50G

The suggested cache size is 50-100G.

You can watch ccache being used by doing the following:

$ watch -n1 -d prebuilts/misc/linux-x86/ccache/ccache -s

On OSX, you should replace linux-x86 with darwin-x86.

When using Ice Cream Sandwich (4.0.x) or older, you should replace prebuilts/misc with prebuilt.


ADB: Android Debug Bridge.

adb devices
这个命令是查看当前连接的设备, 连接到计算机的android设备或者模拟器将会列出显示


adb install


adb uninstall <软件名>
adb uninstall -k <软件名>
如果加 -k 参数,为卸载软件但是保留配置和缓存文件.


adb shell
adb shell
退出shell:ctrl+D or exit
后面加将是直接运行设备命令, 相当于执行远程命令


adb push <本地路径> <远程路径>


adb pull <远程路径> <本地路径>


adb help

ubuntu 切换java版本

由于在安装android sdk过程中安装了open jdk 7,在编译android 时候需要Java SE 6,所以切换java版本

update-alternatives --config java
update-alternatives --config javac

读App Store Marketing Guidlines后的总结

| Comments

在前几天,我的第一个app-“会轻松” for ipad上线了,收到了iTunes给我发的邮件,提醒我:Before you market your app, read the App Store Marketing and Advertising Guidelines for Developers.这个文档主要是讲如何推销和宣传你的app,总结一下几个注意点。

  1. All marketing or advertising materials in print or video format, or materials with high visibility in any format, must be submitted to and approved by Apple before publication or broadcast. 就是说你用来宣传你的app的视频和图片需要让Apple来审核才能对外发布。通常一般我们不会去自己diy一些视频和图片来宣传自己的app。

  2. 最常见的是在websites上显示App Store Badges,就是如下图所示的:

    App Store Badges注意尺寸。
    • Minimum size is 10 mm for use in printed materials and 40 pixels for use onscreen.最小是40px在屏幕上显示,10mm在打印出来的东西上显示。
    • Always select a size that is clearly legible but not dominant.也不要太大,只要清晰即可。

  3. 在对你的app做一个“全景图”时候,要使用黑色的Apple product,图片上的内容必须是app中有的内容,不要显示Home Page和自己另外加上一些东西。如下图:

  4. 在用文字说明来promoting你的app时候,使用“Your app name for iPad,iPhone,iTouch”, 不要使用系统的名称"Your app name for iOS OSX".

  5. 如果你的app是做实物游戏类,如Sphero,App Store Badges应该印在实物包装的背面或者正面的旁边。Place only one badge on the side or the back of the package.

What is REST  API In Web

| Comments


REST stands for Representational State Transfer, and it was proposed in a doctorate dissertation. It uses the four HTTP methods GET, POST, PUT and DELETE to execute different operations. This in contrast to SOAP for example, which creates new arbitrary commands (verbs) like getAccounts() orapplyDiscount()

A REST API is a set of operations that can be invoked by means of any the four verbs, using the actual URI as parameters for your operations. For example you may have a method to query all your accounts which can be called from /accounts/all/ this invokes a HTTP GET and the 'all' parameter tells your application that it shall return all accounts

Customizing Bootstrap(转)

| Comments


Twitter’s Bootstrap has taken off like a rocket since its release a year ago. The popular CSS framework supplies a responsive grid system, pre-styled components and JavaScript plugins to aparade of websites.

One of Bootstrap’s appeals is that it just works. It’s a significant time-saver when starting a website, so much so that major organizations such as NBC, NASA and the White House are adopting it. And it empowers even the non-designers among us to turn out something decent.

To illustrate, you can transform the default button below on the left to the polished one on the right just by adding two classes: btn and btn-primary.

A browser’s default button (left) and a Bootstrap button (right).

But what if your company logo is a different shade of blue? Not to worry. You don’t have to stick with the defaults. This article shows some ways to customize Bootstrap to fit your needs, whether it’s a tweak to a button or a full-fledged theme.

Three Bootstrap themes from Bootswatch

Overriding With CSS

The most straightforward approach is to override Bootstrap’s styles using CSS. This can be accomplished by writing your own styles for the classes used in Bootstrap. You could, for example, make your buttons more rounded by adding the following code:

.btn {
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;

A Bootstrap button customized with an increased border radius.

For the overrides to be successful, remember to add your code after Bootstrap’s have been declared.

The advantage of this method is that it hardly changes your workflow. Even when using Bootstrap, you’ll want your own style sheet in order to fit the framework to your content just right. You might not realize it, but Bootstrap’s own website relies on a thousand-line style sheet on top of Bootstrap.

But for more extensive changes (such as overhauling the navigation bar) or for changes that aren’t localized (such as changing the highlight color used throughout the website), overriding in this piecemeal fashion can feel like a band-aid solution. And your new styles are tacked onto Bootstrap’s default style sheet, adding bloat to the already considerable 100 KB size. If you’re planning more than a few such overrides, you may want to consider a more extensive approach.

Generating A Custom Build

An alternative is to create a custom build entirely. With the official generator, you can assign your own values to key variables that are reused throughout the framework, such as @linkColor@navbarHeight and @baseFontFamily. Click the big button at the end of the generator and download the resulting style sheet. You can even pick and choose which components to include, slimming down your file size.

Some of the variables that can be set in the official generator. (Large version)

Several third-party generators are also available on the Web. Unlike the official generator, they provide live previews as you adjust variables. Bootswatchrorganizes itself by variable, and StyleBootstrap by component. BootTheme adds a roll-the-dice feature to randomize your values. If lady luck isn’t on your side,Lavish can generate a theme from any image you provide, and PaintStrap from existing color schemes.

Using a generator simplifies the logistics of custom-building Bootstrap. And with a deft hand, you can pull together a well-designed, unique look.

Digging Into LESS

Even with over a hundred variables, you still might find generators too constraining. Or you might not want to work in-browser, which can limit integration with your workflow. In either case, it’s time to dig into Bootstrap’s source.


As an open-source project, Bootstrap’s source code is freely available (ZIP) for downloading.

Open the source and you’ll notice that Bootstrap’s styles aren’t written in CSS after all, but in LESS. LESS is a dynamic style sheet language that sports anumber of advantages over CSS, including the ability to nest selectors and to create variables (as used in the generators above). Once written, the LESS code is compiled to CSS either in advance or at runtime. If Sass is your preferred language, there’s a Sass conversion of Bootstrap.

In the less directory, you’ll find a bunch of LESS files labelled by component.

The LESS files that make up Bootstrap’s source. (Large version)

Some things to note about these files:

  • bootstrap.less This is the central file. It imports all of the others and is the one you’ll ultimately compile.
  • reset.less Always the first file to be imported.
  • variables.less and mixins.less These always follow because they’re dependencies for the rest. The former contains the same variables as used on the generator websites.
  • utilities.less This is always the last file to be imported, in order for the classes that it contains to override the rest of the styles where necessary.

Open up the LESS files and check out how Bootstrap styles each component. For example, in buttons.less, here is the rule for the .btn-large class:

.btn-large {
   padding: 9px 14px;
   font-size: @baseFontSize + 2px;
   line-height: normal;

As you can see, it looks very similar to CSS. It does have a couple of LESS-specific features, however. In the font-size declaration, the variable@baseFontSize — specified in variables.less — and an addition operation are combined to calculate the value. The .border-radius mixin, defined inmixins.less, also handles vendor prefixes so that we don’t have to.

It’s within these LESS files that you can make your customizations. Start with the values in variables.less, then experiment with the styles in the rest of the source. Have some fun with it.


After you’ve made some changes and are ready to view them, you’ll want to compile to CSS. To do this, you’ll need to install LESS. You have a number of options; for starters, I’d suggest a client such as LESS.app.

If you prefer the command line, then install Node.js, which includes the Node Package Manager (NPM). Then, issue the following command:

npm install less 

Once it’s installed, you can compile bootstrap.less like so:

lessc bootstrap.less > bootstrap.css 

And for the minified version, use this instead:

lessc --compress bootstrap.less > bootstrap.min.css 

Regardless of how you compile, target only bootstrap.less when compiling, not any of the other files.


You might notice a limitation of the approach above. Your changes are now intertwined with the original source. So, when Bootstrap is inevitably updated with bug fixes and new features, disentangling your customizations and updating them to the new version will be nearly impossible.

To avoid this issue, you’ll want to modularize your changes. Here’s the approach I take when making themes for Bootswatch.

First, I download Bootstrap’s source code, rename it to bootstrap and leave it untouched. Instead of making changes to the files that it contains, I create a separate folder, named custom, with these three files:

  • custom-variables.less I make a copy of variables.less from Bootstrap’s source and modify the variables in this copy instead.
  • custom-other.less This file holds any other customizations that I want to make that aren’t possible with the variables.
  • custom-bootstrap.less This is the new “central” file that you’ll compile to CSS. Along with the original LESS files, it imports the two custom files above using the following commands:
@import "../bootstrap/less/bootstrap.less";
@import "custom-variables.less";
@import "custom-other.less";
@import "../bootstrap/less/utilities.less";

By keeping the changes separate, you can easily upgrade to newer versions of Bootstrap. Just replace the old bootstrap directory with the new one, and recompile.

I’ve created a boilerplate for this set-up, named swatchmaker. It also includes some extras, such as test pages and commands to update Bootstrap to the latest version, to automatically compile whenever changes are saved, and to reset your customizations.

Tips And Techniques

Here are additional tips and techniques that you might find helpful when customizing Bootstrap.

  • Get to know Bootstrap. Read the official documentation, familiarize yourself with all of the components, and learn the ins and outs of the source. If you will be regularly customizing Bootstrap, then the time you invest here will pay off down the line.
  • Start with variables first. Whether you’re using a generator or editing the source, begin your modifications with the supported variables. You might discover that they’re sufficient for your needs. Just changing the navigation bar and basic colors is a huge start.
  • Pick your palette. Think about your website’s color scheme, particularly your primary and secondary accent colors. Some good resources are out there to help you with this. After you’ve decided on a palette, set up and use these colors as variables. You shouldn’t be seeing hex codes sprinkled throughout your code.
  • Add some assets. A textured background and custom font make a world of difference. For Web fonts, you can add the @import statement anywhere in your code, because LESS will hoist it to the top of the generated CSS. I like to keep mine at the top of custom-other.less.
  • Use alpha transparency. When adding touches like box-shadow and text-shadow, define your colors using RGBa, with fallbacks for old browsers, and use your values consistently. This will add cohesion to your components.
  • Match selectors. When overriding a class, try to use the same selector that Bootstrap uses. This will help to keep your classes in sync with the originals and avoid an escalating specificity war. Remember that, in a tie, the last one wins. With the modularized set-up above, your customizations will always override the defaults.
  • Encapsulate your code. Remember that LESS allows for nested selectors. Make use of this to encapsulate each component. I’ve found this to be a big help in keeping code tidy and readable. While both work the same, rather than using this… .navbar .brand { color: @white; } .navbar .nav > li > a { color: @grayLighter; } … try this: .navbar { .brand { color: @white; } .nav > li > a { color: @grayLighter; } }
  • Take advantage of mixins. Out of the box, LESS includes handy mixins such as lighten() anddarken(). The ones that Bootstrap defines in mixins.less are also at your disposal. And don’t forget that you can always create your own.
  • Learn by example. Look at how others are customizing Bootstrap. For instance, the sources for all of my themes are available on GitHub.

Do you have a tip to add? Please share in the comments below.

Final Word

If performance is a priority — as it often should be — then you’ll be best served by tailoring your own solution atop a more lightweight foundation.

But if your goal first and foremost is to launch your website, or if front-end development isn’t your strong suit, then Twitter Bootstrap may be right for you. Many people put themselves in these camps, judging by Bootstrap’s popularity.

Given its heavy usage across the Web, consider taking everything good about Bootstrap and making it your own.