[Nonsense] Speed up this blog !

speedup

After few years, I finally moved this blog to another server based on Linode (Thanks @bu). After testing for a while, it seems that the connection speed got 2x ~ 4x faster than it was ! I think this would make the reading experience better (Not sure whether there are people still reading my blog or not, whatever XD)

BTW, I am working on an undergoing project which comes from my previous opensource project – Atraci with some hackers few months ago. This is the next-generation (I guess) streaming player that would support multi-platforms like YouTube, Vimeo … etc. Because there are still some missing parts that need to be finished first, I will keep updating its recent news here when I have time. To be honest, only when you have a chance to start over a new stuff can make you learn more and grow, so if you guys got a break, try to find something new to give it a try and I am sure you would definitely get a lot from it ! (Not money for sure xD)

See you guys next time 🙂

[Look Back] 2014 – a complicated year

Image Credit

2014 年也發生了好多事，好壞的事都參半，整個不知道要怎麼評斷這一年呀 …

2014 – the past

Good part

得了流感，體驗人生第一次無意識摔倒，整個記憶猶新。
試著自己做了一些設計 Logo 的嘗試，雖然只持續了三到四次，但不失為下一年度的練習方向。
因為無聊寫了 TwZip.js 的 opensource 專案。
成為 FxOS Settings App 的 Peer。
生平第一個 iOS app – HackerNews 成功上架並販售了幾回，目前已經重寫來到了 1.0.5 版。
參加了幾次學運見證歷史。
加入 Atraci 的開發，算是為人類做了一點點貢獻。
Hax4 在香港成立公司，和 Bu 分頭進行業務的擴展。
買了一台 Sony 的類單相機並開始學習拍照。
Blog 都有在寫。

Bad part

沒參加 Opensource community 去演講。
TBS 沒達 300 likes，目前才 140 左右，需要加強內容及計畫。
Español 沒學好。
沒和朋友組隊去比 Hackathon。
~~女朋友掰…~~

2015 – the future

把 OutCircle 的 Prototype （Website + iOS App）完成並丟出去做市場驗證。
讓 Hax4 具有獨立營運的能力。
背好五十音 (!?)
挑戰一個人去旅行，學著和自己對話。
勇敢離開自己的舒適圈。
讀 15 本書（目標愈來愈低了 XD）
不要一個人過完這一年。
大家都可以身體健康（包括自己）。
其他的就隨緣吧 😛

[Guitar] Love you secretly

用這首歌重捨房間角落的吉他。

[Nonsense] First Love in Japan

https://www.youtube.com/watch?v=_Q5-4yMi-xg

宇多田ヒカル – First Love

不知道是不是因為漫畫大多都是日漫，所以不知不覺中有種受到日式文化感召的影響，開始聽起了日本歌，也想多了解這個國家、文化、甚至是人民。因為有在聽 KKBOX，所以就想聽聽看最近熱門的日語排行榜，裡面第二名的就是當時（199X）年超紅的 First Love，旋律整個就是相當懷念！

不知道是不是出於無聊，就想來查查看這個專輯（歌）的過去。一看 Wikipedia 才知道這個專輯在當時的音樂界是多麼的出名。

《First Love》是日本女歌手宇多田光出道專輯，於1999年3月10日發行。據Oricon公信榜統計，專輯發售當年在日本國內銷量突破765萬張，並持續停留在排行榜上達85星期之久。RIAJ對本專輯之正式認證為八百萬專輯（相當於32白金）[1]，為日本Oricon公信榜史上銷量最高記錄。本作於台灣賣出超過50萬張，是台灣史上銷量最高東洋專輯[2]，並為香港史上銷量最高東洋專輯。

《First Love》同時也是全亞洲銷量最高的專輯，全球銷量總計約一千萬張。

宇多田光一出道即在銷量方面登上Oricon公信榜四十年來歷史頂點，而那年的她只有16歲。《First love》空前的成功，往後常被日本樂壇稱為「宇多田ヒカル神話」。

2014年3月10日，由EMI唱片公司發行限量15000套的《First Love －15周年特別紀念版－》，除了歌曲重新經過音質處理，並收錄1999年於東京Zepp Tokyo舉辦的LUV LIVE演唱會DVD。

From Wikipedia

愛上日本文化，從聽歌開始！

[WTH] critical flaw in our review process

Image Credit

Let me tell you a story

Recently, I have been assigned as a reviewer for a patch provided by our partner and this is okay to me because as a peer of Settings app, it’s part of my duty to review these patches. But … sadly, there are so many problems in that patch and I thought “Ok, it’s fine, because we all would make mistakes at first especially if you are not familiar with the part of codes”, so I tried my best to comment down all problematic codes with references (like to MDN or some related codes) to make sure they can get familiar with them more quickly and easily.

After several rounds of this process, we finally made it and I thought this patch was good enough to be landed, so I gave them r+ on this patch.

If the story ended here, then I don’t have to write any bits of words like this article. As you may know, this is not the end.

What happened next

After signing-off this patch, there are still some other reviewing processes undergoing for different part of codes. For me, I have done my works, so I just left them alone and kept focusing on new features. Someday in the morning, I randomly checked the messages on Github and noticed there was one comment about the r+ patch, just out of curiosity, I decided to click it and checked it out.

That was a comment about missing change on the entry point and this definitely broke Settings app (You can’t even do anything). But … I was sure that this did work when I gave r+ because I did try the entry point to jump to that specific app when reviewing. So what’s going on right now !?

After a while, I finally realized that they just changed the code without any further notification and because the code change is kinda huge, no one would realize this problem when reviewing patch. So what does this mean ? If you really want to set someone up in this review process, you just have to get his/her r+ on your patch and use some magical git commands to break it and NO ONE WOULD NOTICE THIS AND WOULD BLAME ON THE REVIEWER !! (I wasn’t blamed yet, but if this patch got merged and I didn’t notice this, I would be the one)

Final

We all know this is the critical flaw in our review process, but in order to trust anyone, we haven’t forced people to tell us if the patch got changed after r+. By doing so, this would make the review process more easy and we don’t have to get stuck in some kinds of principles. Sadly, this happened to me few days ago.

Not sure what to fix here because if you are familiar with git, you can do whatever you want on commits. It is a double-edged sword which provides you so many advantages and also some shortages. I just hope this was not made on purpose …

SUCK.

[Nonsense] What’s going on recently ?

Image Credit

It’s been a while not writing any article on my blog recently. For me, there are too many things happened within these two months no matter on life, works … etc. There are some good parts and also bad parts but I don’t want to talk too much on the later ones.

So, let me talk more about what good parts happened here recently.

Life

life sucks.

Works

Same as usual, there are too many things waiting to do / review in Mozilla. After last Friday, we just passed the due of 2.1 (but this doesn’t mean we have no 2.1+ blockers any more xD) and it’s like a “gap” now that we can refactor our old spaghetti codes to make them clean and better.

For example :

Removed some legacy code that would do the same thing in different scripts.
Introduced an appsManager module in Settings app to make sure we won’t overload Settings app to keep access installed apps from API.
Wrote lots of unit tests.
Implementing Settings Dialog feature that we can easily use a function call to show/hide customized dialog with fancy animations.
… etc

In addition to codes, I had to review partner’s codes back & forth and this reallllllly takes time … There is a huge communication gap between each others about due and how to implement features. No matter how, I think this part can get improved in later days.

And there is one more good news – We (All Mozilla employees) are going to Portland from 1st Dec ~ 6th Dec this year ! Can’t wait to go there to meet some new friends and also pass by LA to find my best friend !

Side Works

For side works, I have focused mainly on Node.js (express 3 framework) and iOS development. I want to make an online service focusing on solving problems for backpackers when traveling and my friends and I are actively collect data for these stuffs (like hostels, food, drinks … etc).

In order to achieve this, I have to learn how to write with Swift for iOS app. I did write an app before (with obj-c) but it’s totally different from Swift in syntax and some concepts behind. But as a front-end developer, Swift looks more nature and easy to me but the only bad part for Swift is that you can’t find too many answers to specific problems because It is too young xD. But whatever, I like it so bad !

And for Node.js part, as a full-stack (I thought I was front-end) developer, you have to focus both on backend / front-end (including database, IT … blah). I am not really good at db / IT stuffs but I think this is such a good time for me to learn.(I did try some setup before but not so much) So, to conquer these, I did swipe my card on Linode to rent a machine and register one domain name for that service. By doing so, you can think this behavior of a resolution and you can’t go back ! (Because this would cost you money monthly XD)

I like the feeling to be pushed to the edge of cliff and this would force me to learn something new 🙂

Other plans

I am planing to Thailand (Bangkok maybe ?) next year with friends.
Have to keep reading books no matter what type it is ! (Just created a new page called my-bookshelf to track them :))
Try to make Hax4 back so that this team can really work as a normal group !
Keep learning something new.

[FxOS] Why we need to squash commits ?

This is what I found in our Taipei office “Squash bugs for a better ~~(Life)~~ Web”

Concepts about version control

When using version control tools like git, hg … etc , we all have one common concept in mind that we have to commit often to make sure all stuffs can be tracked and understandable when reading histories. By doing so, sometimes we may break a bug to many chunks and this would make us hard to track at the first glimpse. All you can do is trying to find the first commit about the bug and keeps reading commit by commit to know the whole story.

For personal / small project, I think this is ok. But for a big project like Gaia or some other open source projects, this would not be a good idea to do so.

In Gaia

Go check Gaia repository first, you will notice there are more than 35,000 commits and 470+ contributors in this project. To be honest, this is really a huge repository. There are so many people working at the same time in different timezones trying to make FirefoxOS better, so there must be really hard to control. But after being part of Mozillian, I finally understand how they try to maintain it.

Our latest commit history

As you may see, for us, each commit will be reflected to one bug with bug number on the title. By doing so, we can easily understand what this patch is for and what it is going to fix. With bug id, I can easily search Mozilla’s bugzilla to understand the discussion histories and design specs there.

In addition to this, if each commit is mapped to each bug, then we can easily revert any patch that broke Gaia! For example, you can check the picture and notice that there is a revert commit made by crh0716. That’s because the patch broken something in Gaia, anyone can go ahead and find out the patch then back it out !

It’s amazing, isn’t it ?!

So, how to squash commits !?

If you read this line, it means you did read the whole article and want to know something about this ! From my experiences, I noticed there are less people knowing how to do this (I met few contributors and they all messed the git history up in the end xD ! It happens every time LOL).

So, I made a quick screenshot to help you understand how to do this. Just to remind you, there may be some other ways to achieve this, but this is how I do in my daily life.

Hope this helps ! And any feedback or comment is appreciated ! Cheeeeeers !

https://asciinema.org/a/11269.js

[Hack] We are Atraci

Image Credit

Check the repository here

Stories

Few months ago, on HackerNews, I noticed there is one news talking about a desktop application called HipHop. I was curious what it was at the first glimpse, but just after using it, I was becoming one of the maintainers. As you may see, it is an music application written based on node-webkit and can be used on Windows, Linux and Mac OSX.

But sadly, because at the first, HipHop would hide the video and it would break Youtube’s ToS. In this way, HipHop was forced (?) to be taken down. And then after a while, another maintainer helped to move the code out and show the video on the application to avoid breaking ToS, and this brand-new application is called – Atraci.

So yeah, this is just a basic story about Atraci and I am currently active on this project and try to make it better to use. Hope one day this application can compete with the other applications like Spotify.

What I Learned

You have to spread your investments out. Remember to share your resources with the others because you may get absent one day with any reason.
It takes a lot of efforts to co-work with others.
If you want to make your application cross platforms based on node-webkit, you have to make sure you have enough platforms to test with your application.

For note one, you would never know what would happen tomorrow especially in open source. For example, one of our core maintainer has to join the military services for some reasons accidentally and He is the only one who controls the domain name, s3 server and has privileges to add others into Slack. So, after he went to the army, no one can control all of them and the only way to fix this is to make a new one. This would definitely hurt experiences for users and I can’t do anything on this. All I can do is trying to transfer all of them back to Github gh-pages and maintain there. So if possible, please make sure there is always another one who can do the same thing like you.

For note two, because it’s an open source community, you can’t control too much on the skills and their habits. So its takes time to co-work with them. All you can do is trying to make some principles and tools for you like linters or something else. You need machines to help you control these stuffs because you would never know what you missed when writing codes.

For note three, this is kinda annoying too. In order to cross platforms, you rely on node-webkit to help you overcome this shit. But, sadly, there is always some fucking weird problems that you would never know and would happen only on specific platform. Because I only use Mac, so I can’t make sure the application would work on Linux and Windows, this is really scary if you are going to release builds that you have never tested on.

So after a while, I found another maintainer who can take care of Windows and Linux and I would focus on Mac and Linux. This decision really helps and makes the program better.

Some words

Except above notes, there is one more thing I need to share. Always respond quickly and don’t be afraid to make mistakes. In Atraci, there are always bugs coming up and need people to fix. All I can do is respond quickly to make them feel they are noticed, and trust me, this definitely works all the time.

Hope this helps for you guys. Stay tuned with my next post 🙂

[WTH] I hate Influenza

Image Credit

上上個星期五的中午，和同事吃完午餐回到公司後，就開始瘋狂覺得莫名的冷，就算連切換到 Mozilla Space 還是覺得很冷，我原本一直以為是空調的問題，但是直到我一直發抖到有點無法控制之後才覺得有點不太對，只能立馬請假去看醫生，而在離開前同事很強的不知道去哪邊弄到一台體溫槍，不量還好，一量就 38.6 度 … 只能趕快去找計程車回家了。

一開始還很慘的跑到一間已經關門的診所，當時真的不知道我是如何在大太陽下走到遠端的另一間診所，然後還等了快 20 分鐘看醫生，明明就沒什麼人而且看起來也沒什麼問題也是在這邊排隊，我當時整個就是靠在牆上呈現一個快死亡的狀態。

好不容易輪到我了，快速給醫生診斷之後就量了一下體溫，此時已經來到 40 度了，當時心想人生的尾端大概也不過如此吧。在拿了醫生的爛藥之後（後面有去給別的醫生看，只是退燒藥而已），趕快衝回家昏迷，就這樣整整睡了一晚，還好室友回來還有順路帶個水及簡單的食物，雖然沒什麼食慾但至少還有一種活著的感覺。

隔天，全身莫名的痠痛（流感典型症狀）然後都是汗，覺得這下去不行就跑去沖澡，但是洗到一半整個人就快昏倒，只能用最快的速度衝了出來（還來不及穿東西），就在這個當下我短暫的失去了幾秒的記憶，等到我有意識的時候是倒在地板上了，我連我怎麼跌倒都不知道，這真的非常嚴重，只能趕快爬到房間打電話給隔壁的室友來救命。我還記得當時的心跳真的超快，有種會不會就這樣和這個世界告別的感覺。

人生第一次的短暫無意識就這樣送給了我第一次得的流感。

之後就是一連串的睡覺還有休養，整個週末都在床上渡過，只能感謝家人還有室友、好友才能好好的活著，雖然大家都一直叫我要小心、注意，但是我到現在還是對於為什麼我吃完午餐就得到流感這件事情沒有頭緒，也許很多時候事情都沒有什麼頭緒可言吧。

請大家也多注意身體，夏天好像反而是流感的高峰期，別想要體會短暫無意識的感覺，因為，

真的，很糟。

[Design] Weekly Challenge – Pin Icon

Yeah, it’s weekly challenge day again ! Today I want to design something looks simple but with some details inside. Again, after searching for a while in Dribbble, I pick two designs out of them and they are all about icons !

Icons
//

Location icon
//

Yes, they all look simple but there are really some details inside. For the first design, it uses shadow to make the image jump out with a little bit 3D effect. While for the second one, you can notice the designer only use few colors, bold lines to make it flat and clean. So here comes my brainstorming time, is it possible to make a pin icon like the second design and also it still has shadow inside to make it not so boring ?

Instead of starting to open my illustrator at once, there is also another idea hitting my mind. I want to make the pin icon different from the others with some personal ideas. After seeing so many pin icons from Google, I noticed that they all miss an important concept – What happened in the pinned place at that time ? Is it possible to provide information about Geo location and some random screenshots at that place ? If yes, for users, this may be more friendly to use when navigating the online map.

So here comes my design :

Yes, it is a pin icon but with some functionalities I want – a placeholder for images (with 15% opacity), shadows to make it 3D, and itself – a pin which makes you pin the place you want on the map. And I also make image about the real use case for this pin :

It may look not so clear, so you have to click on the image to check the real size (still compressed, but bigger).

Some Thoughts

From this challenge, I learned some skills about how to put shadow on images and how to make an image mask to showcase part of content you really want. And also, it is important for designers to think more about the real use case of what they designed before turning on illustrator. In this way, you won’t live in your own ivory tower.

That’s it, hope you guys like it and I would keep practicing on the way to design. Can’t wait to accept coming challenge next week, cheeeeers ! 😛