Archive for December, 2011

[terminal] archive file to zip format with password on terminal

Friday, December 30th, 2011

We can archive file to zip format on terminal without any other app.

1. archive only a file

zip filename

2. archive directory

zip -r directoryname

3. archive directory with password

zip -P yourpassword -r directoryname

[iOS] CSS3 animation is stopped when I scroll my safari on iPad.

Monday, December 26th, 2011

I wrote CSS3 animation code like this, and apply it to certain element.

@-webkit-keyframes flapping {
   0% {
   100% {

But CSS3 animation is stopped when I scroll my safari on iPad.
Accurately saying, it stops on 0% position of keyframes, and doesn’t progress further more.

I googled. Then I got a result which may resolve this problem.

>> GPUアクセラレーターが使える環境で強制的に有効にできるCSSの指定方法

It says that mobile safari is flickered when safari changes CPU render to GPU one.
If safari initially uses GPU rendering, it doesn’t flicker.
To do this, write this css property to target element.

-webkit-transform-style: preserve-3d;

Then I fixed the problem by this way.

I think that safari may change render method when it scrolls.

[terminal] recursively delete .DS_Store in terminal

Saturday, December 24th, 2011

I noticed that my git repository has .DS_Store files.
The .DS_Store file is used by Mac OS.

As I wanted not to include these files in my repository,
I tried to delete these as follow way.

First, I deleted all .DS_Store files in the directory recursively on terminal.

find . -name '.DS_Store' | xargs rm

Next, I created ~/.gitignore_global file.

update 26th Dec. 2011
I have to type this command

git config --global core.excludesfile ~/.gitignore_global

I wrote these strings in it.
The file is global settings in git.
If you specify a setting in certain directory, you can create .gitignore file in the directory.
It stops to add to stage of git the files in which are wrote.

# OS generated files #

Finally I committed this state.

I referred these sites. Thanks.
>> フォルダ以下を再帰的にgrep検索する方法 – gorton-lab 日記の下書き
>> Help.GitHub – Ignore files

[JavaScript] 3D on Canvas2D

Tuesday, December 20th, 2011

I am learning 3D basic theory again.

I have been using these books.
They are very kind for beginners like me.

>> Beginning Math and Physics for Game Programmers [Paperback]
>> Foundation ActionScript 3.0 Animation: Making Things Move! [Paperback]

Although I have learned 3D basic theory in AS3 before, I am trying to implement it by JavaScript.

I wrote above demo by this way.
I wrote CoffeeScript first.
Then it is compiled to js file by Cakefile which watches the .coffee files in certain directory.

[JavaScript] watch and compile, then concatenate them in CoffeeScript Cakefile

Saturday, December 17th, 2011

I am learning CoffeeScript.
I saw Cakefile, and learned it.
I found that it behaves like batch file.

Then I wanted it to use as these way.

1. It keeps watching src/*.coffee files
2. When they are changed, it compiles them
3. It concatenates compiled files to lib/main.js

I made below code.
Although I don’t know whether it is correct or not, it works.


{spawn} = require 'child_process'

task 'watch', 'watch src/ and concatenate them to lib/main.js', (callback) -> 
  watch = spawn 'coffee', ['-w', 'src/']
  watch.stderr.on 'data', (data) ->
    process.stderr.write data.toString()
  watch.stdout.on 'data', (data) ->
    console.log 'file changed'
    build = spawn 'coffee', ['-j', 'lib/main.js', '-cl', 'src/']
    build.stderr.on 'data', (data) ->
      process.stderr.write data.toString()
    build.on 'exit', (code) ->
      if code is 0
        console.log 'build complete'

How to use
In terminal type this

cake watch

I refered these pages. Thanks.

>> node.js – coffee script cakefile task not finishing – Stack Overflow
>> [HowTo] Compiling and Setting Up Build Tools – GitHub
>> The Little Book on CoffeeScript – Compiling
>> Cakefile(zsh) – podhmoの日記
>> CakeFileの使い方 -CoffeeScript- – プログラムdeタマゴ

[JavaScript] ratween CSS3 Transition jQuery plugin

Tuesday, December 13th, 2011

I made ratween jQuery plugin .
This plugin makes elements CSS3 transition.

See demo

>>Download it from github.

It’s very convenient plugin when you develop webkit browser in iOS.
Because CSS3 transition is faster than normal css tween.

These pages contains very useful information.
Thank you for writing.

>> Plugins/Authoring – jQuery JavaScript Library
>> Detecting and generating CSS animations in JavaScript ✩ Mozilla Hacks – the Web developer blog
>> CSS transitions – MDN
>> Visualize and manipulate CSS transition functions