E.J. BLOG

[Hack] We are Atraci

Leave comments

Facebook0Google+0Twitter1

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

  1. 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.
  2. It takes a lot of efforts to co-work with others.
  3. 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 :)

Written by EragonJ

July 23rd, 2014 at 9:36 pm

Posted in Hack

Tagged with , , , ,

[WTH] I hate Influenza

Leave comments

Facebook0Google+0Twitter0

Image Credit

influenza

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

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

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

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

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

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

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

真的,很糟。

Written by EragonJ

July 14th, 2014 at 11:31 pm

Posted in WTH

Tagged with , , ,

[Design] Weekly Challenge – Pin Icon

Leave comments

Facebook0Google+0Twitter1

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 :

pin

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 :

pin-map

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 ! :P

 

Written by EragonJ

June 21st, 2014 at 1:14 pm

Posted in Design

Tagged with , , , ,

[Git] How to maintain a huge and long-lived branch

Leave comments

Facebook0Google+0Twitter4

pr

Story

Currently I am maintaing a god damn long-lived and huge branch on my local and for me, this is xxxx annoying -_-. Here comes a tip first, please make sure to break down your patch as much as you can. For me, this patch looks kinda independent and tiny enough, but I am wrong in the end.

As you can see, this branch has changed almost 60 files in the codebase and change of LOC has increasing to 5000 ! So, you can definitely guess that there must be so many conflicts happened especially Mozilla/Gaia is such a huge open source project and is contributed by lots of hackers from different timezones in this world. Based on my observations, it can hit more than 5000 LOC changes like features, bugfix … etc per day !

But, this case helps me to get familiar with how to keep your branch up-to-date with main trunk and I already came up with a small SOP to help me on this. In order not to forget this important experience (I don’t think I will forget xD), I would write them down about how I made it.

SOP

  • git checkout -b bug-973466-backup-20140619
    • Make sure to backup one copy of your current branch in case of something broken when rebasing. In my case, because I have to keep it up to date with main trunk all the time, it would be better for me to use Date format to make it readable and easy to identify.
  • git checkout bug-973466
    • Jump back to current branch
  • git rebase master
    • Rebase your code onto master to keep updated with it
  • Solve conflicts
    • You will find so many conflicts in this stage, and please don’t be afraid, use github / git diff / vimdiff or anything whatever to make sure there is nothing broken in this stage and both of theirs and ours changes are still there.
    • If you got lost in this stage, just did git rebase --abort to exit the process and there is nothing influenced ! Yeah.
  • If you successfully solve conflicts and nothing is wrong, it’s great ! You are free now !
  • If you found something wrong later after rebasing, it’s too late to recover, that’s why we need a backup ! Just remove your current branch and replace it with backup one, nothing is broken now ! Nice !

Some thoughts

  1. Don’t make your branch huge and try to break it down to smaller parts.
  2. If your current move is danger and hard to recover, always remember to make a backup.

Hope these information helps ! Any idea or feedback is welcome !

Written by EragonJ

June 19th, 2014 at 5:38 pm

Posted in FxOS,Git

Tagged with , , , ,

[Design] Weekly Challenge – Fire and some sketches

Leave comments

Facebook0Google+0Twitter1

Another special day for weekly challenge ! After continuously practicing on drawing and illustrating these few days, I think I am addicted to these stuffs ! I still remember the time when I was still a sophomore  student in the university, I was planing to take double majors on Computer Science and Industrial Design. Haha, but I didn’t take action in the end and still stayed on the CS fields.

After so much passing times, I am curious about the reason why I had such a plan in my mind then. Does it mean I love design ? Not sure, but it may take time to verify hmmmmm

Whatever ! Here comes today’s design challenge, this time I got a plan in my mind that I want to practice sketching and icon-designing, so after scanning dribbble, I found a simple logo here :

Branding | Exploration “Heated Speech”

This time, instead of jumping into illustrator directly, I planed to do a rough sketch on my sketchbook first. (Yes, I bought it few months ago but I didn’t use it to sketch anything haha) This is what I got finally :

sketch

Yes, it’s fire with some sharp curves and that’s it ! So after doing this prototyping, I used illustrator to make a real one based on it !

fire

In this logo, I spent so much time on drawing baselines on intersections of curves to make sure I can make the original sketch to real. In addition to this, in order to make it look really real, I realized the color is god damn important. So, I also spent more than half an hour on picking colors for the logo and took other’s works on the internet for references.

From my side, this part may be the most difficult part when designing this logo. I am not good with color so I had no any idea about what color to use ! (You would definitely agree with me when you see my wearings -_-) But as a programmer, we all have to solve problems on our daily jobs, so I decided to use some default linear colors and add some additional colors. Although I still don’t know how to choose, this is a good start for me, isn’t it !? haha

I think that’s all for today’s challenge ! Here comes some random sketches by following some online tutorial on how to draw objects. Hope you guys like it and any feedback and suggestions would be appreciated ! Stay tuned with my next work :)

Random Sketches

Wizard

wizard

My iPhone 4s

iphone4s

Written by EragonJ

June 16th, 2014 at 1:06 am

Posted in Design

Tagged with , , , , ,