Kawanet Tech Blog

"Escape From F5" won the OneNote challenge prize at DeveloperWeek Hackathon

I've done the hacking at Accelerate SF 2015 Hackathon held as a part of DeveloperWeek 2015. Our project has won the prize for Microsoft's OneNote challenge! The hackathon was huge. 450 developers hacked in one place.

The project is: Escape from F5.

The first demo drop of the product is on live: http://devweek2015.b.kstg.jp/demo/
Both OneNote account and Yammer account is required to test at the demo version.

The project is backed with Microsoft OneNote API, Yammer API and Mailjet API.

It's my first time to run OneNote API. The REST API is designed simple and easy for developers to use. It also has an interesting and unique feature called "data-render-src" attribute which could capture any webpage rendered. Without the feature, I have to spend more hackathon hours to prepare an environment and implement a capture engine instead.

It was announced that the project got the OneNote's challenge prize, at last. I got the prize pack including cool gadgets as below! Yatta!

Thank you, Gareth, Steven and Microsoft OneNote API!

By the way, it's interesting for me that two of the top ten projects are real-estate related services. It indicates the BayArea's rent rate increase is a big problem for developers as well.

Overall about the hackathon from my point of view:

+1: Every team have some of chances to give a pitch on a table (but not on a stage). Judges could give feedbacks in person. This could be great to run a growth cycle.
+1: Less "hacking for money (investment)" and more "hacking for fun" teams compared to other hackathons such like TechCrunch and angelHack. I love both culture however.
+1: No pizza but green salad for the day one lunch. :)
-1: Unstable Wi-Fi. I have connected through my iPhone hotspot instead.
-1: Three floors separated. Less chances to talk with teams working at the other floor.

I've enjoyed the great event, anyway.

I'm at SF until this Thursday midnight and back to Tokyo then.

Apple.com has "_2x.jpg" high resolutionary images for the new iPad

The new iPad's resolutionary Retina display looks cool, but, on the other hand, it terrifies designers in the Web industry. The new iPad is the first HiDPI device which works well for browsing PC websites. All images on the Web must be republished to enhance its experience on the new iPad and other upcoming HiDPI devices.

Apple's website itself is also ongoing to support HiDPI displays. Many image files on the website have a couple resolutions of normal one and doubled one which has "_2x" suffix. Here is a sample:

Traditional resolution version: 1454 x 605 pixel
http://images.apple.com/home/images/ipad_hero.jpg

High resolution version: 2908 x 1210 pixel (doubled!)
http://images.apple.com/home/images/ipad_hero_2x.jpg

Some images on the website still not have "_2x" version at this time, however. Any image files which has "_2x" version are automatically and progressively replaced by image_replacer.js according to the current display resolution setting.

TRY IT NOW ON YOUR MAC

You could try the future with HiDPI on your current Mac by enabling it with Quartz Debug.app shipped with Graphics Tools for Xcode. Apple.com website would show "_2x" images when HiDPI is enabled on your Mac.

AUTO DETECTION

Check window.devicePixelRatio property to detect current display resolution by JavaScript.

Moving to the Bay Area

Hello 2012,

For these 5 years, I have been working at the Media Technology Labs (MTL) which is a R&D department of Recruit Co., Ltd., one of the most largest information media publishing companies in Japan. The company is spreading its business field to the global market. At January of 2012, I'll soon fly to the Bay Area of the center of universe to launch our new R&D branch focusing the cutting-edge technologies of the Internet.

"Wisdom of Earthquakes" Released at TechCrunch Disrupt Hackathon SF 2011

I'm attending the TechCrunch Disrupt SF 2011 held in San Francisco. Prior to the conference, I've hacked here at the huge hackathon filled with more than 700 hackers. It's a really exciting experience. I started hacking the "Wisdom of Earthquakes" web application and released it at the hackathon.

The hackathon started at Saturday noon and ended at the Sunday noon. Each team of hackers must finish their hack in 24 hours.

I've also posted articles about the event and food for hackers on my Japanese blogs in detail. TechCrunch's official report is here.

Wisdom of Earthquakes

After the lunch, the time has came for me to give a talk about my hack on the stage.

I've hacked "Wisdom of Earthquakes" which is a web application with a calendar and a map to tell the wisdom we can learn from earthquakes.

This calendar shows 500+ memorial days of earthquakes hit in the history of the globe. The oldest one listed is the 62 Pompeii earthquake in Italy. We could see almost every day on the calendar has had one or more earthquakes. The wisdom helps us do something to survive at the next coming disaster.

The app is shipped as an open source at:
http://code.google.com/p/memorial-calendars/wiki/tcdisrupt

iPad 2 JavaScript Benchmark Results 37% Faster Than iPad 1

SunSpider JavaScript Benchmark marks 37% faster score on iPad 2 / iOS 4.3.1 / Mobile Safari 5.0 compared to iPad 1st gen.

Also note that iPad 1 could get significant peformance improvement by updating iOS from 4.2.1 to 4.3.1. This means Mobile Safari 5.0's "Nitro" Engine enabled on iOS 4.3 runs JavaScript quite fast.

Benchmark results captured are below:

iPad 2 - 4.3.1 and 4.3

iPad 1 - 4.3.1 and 4.2.1

PS.
My Mac results 344ms on Chrome and 360ms on Safari.
iPads are still nothing compared to Mac. :-<

* Japanese version of this post is here.

KDrawSprite: Get GPU power without cacheAsBitmapMatrix on AIR for iOS

KDrawSprite is an ActionScript library for mobile AIR applications using Packager for iPhone, AIR for iOS and AIR for Android to get more power of GPU. My iPhone app Korean Alphabet 1.2.2 is using this to get more than 30 fps on older devices, ex. iPod Touch 1st gen. A4 chip powered latest devices, such as iPad and iPhone 4, will performs 100 fps over with KDrawSprite.

Source on github:
https://github.com/kawanet/as3kawalib/raw/master/src/net/kawa/display/KDrawSprite.as
Document:
http://www.kawa.net/works/as/as3kawalib/docs/net/kawa/display/KDrawSprite.html

KDrawSprite draws your vector image onto a bitmap image. You don't need to manipulate cacheAsBitmapMatrix and cacheAsBitmap properties. These are powerful, however, sometimes make our app crashed erratically. You need take more care for iPad which has larger screen but has less memory.

How To Use This

Simply call KDrawSprite.getSprite() instead of setting cacheAsBitmapMatrix and cacheAsBitmap properties.

var sprite:Sprite = new Sprite();
sprite.graphics.beginFill(0x336699);
sprite.graphics.drawCircle(50, 50, 50);

// sprite.cacheAsBitmapMatrix = new Matrix(); // BEFORE
// sprite.cacheAsBitmap = true;

sprite = KDrawSprite.getSprite(sprite); // AFTER

addChild(sprite);
sprite.x = 100;
sprite.y = 100;
sprite.scaleX = 0.5;
sprite.height = 50;
sprite.rotation = 1;

Bitmap operations such as moving, scaling and rotation will be GPU enabled.
KDrawSprite will also free memory of image rendered when it comes out of the Stage.

You need call getSprite() or draw() method whenever you make changes on the vector source image. This also means any other needless re-rendering will not be invoked. Learn more on document.

Super Sampling Anti-Aliasing (2x SSAA)

KDrawSprite supports 2x SSAA, super sampling anti-aliasing, in addition to NoAA per default.

Note

To get better performance and rendering quality, you MUST set stage.quality as StageQuality.LOW. Also use 2x SSAA when needed.

stage.quality = StageQuality.LOW; // must

* Japanese version of this post is here.

YAPC::Asia Tokyo 2010 - Japan's Perl Week

Autumn is the best season for Perl hackers to come to Japan as we have the YAPC::Asia in Tokyo. This year, at September 15-16, I attended the great conference held at the Tokyo Institute of Technology Univ.

Thursday, September 14 - Pre-Conference Meetup

One day before the conference, we had the PerlCasual#4 developer meetup event organized by @yusukebe. The event was born as the antithesis of Shibuya.pm's technical talk events which were filled by too deep talks, such like x86, XS, binary etc., by super-guru hackers. Casual developers need another place.

At the event, I gave at a lightening talk "Reporting OSDC.TW - Shibuya.pm in Taipei." This April, we went the OSDC.TW 2010 conference in Taiwan. Shibuya.pm people, including me, gave talks there.

The first half of my talk reports the event and the reason we went there.
And the second is about my 3D JavaScript talks.
Try my slide here and push [3] key on your keyboard to view slides in 3D mode.

Photo (left): @obra's T-shirt shows he is a "Strange Alien."

(right): the Acmencyclopedia 2010 at the after-party of day #0.

Friday, September 15 - Conference Day #1

At the first day of the conference, I and my colleague @iandeth gave a talk. His slides are here. My part is about the Mashup Awards 6 (MA6), Japan's largest web application development contest. My slides are here.

The day #1's after-party was the official party held in the venue.
@clkao's T-shirt shows "Taiwanese." It's easy for us to see his nationality.

My ex-colleague @tsuyoshikawa is a Ruby guy but now working at a large PHP company. The company ordered him to give a talk at the Perl conference. It seems he is drunken from the stresses. :)

Saturday, September 16 - Conference Day #2

Day #2 was Saturday and sunny. Some speakers went down to a BoF looked like a picnic to have a beer under the sun.

On the other hand, as the closing keynote, @miyagawa gave us the great talk filled with many of suggestions and encouragements for developers. The talk was this year's best talk in my opinion.

He showed us the "Secret of success" that he found during his work for Plack and his other projects.

Secret of success

* Good artists borrow, Great artists steal
* Better late than too early
* JFDI (Just f* do it)
* STFUAWSC (Shut the f* up and write some code)
* TIMTOWTDI (There is more than one way to do it.)
BSCINABTE (But sometimes consistency is not a bad thing either)
* KISS (Keep it simple, stupid)
* glue language
* Naming

Thank you so much, the YAPC organizers and volunteers.

Sunday, September 17 - Hackathon

Sunday, we had the post-conference-hackathon at @hidek's.

After the hackathon, we went to a Chankonabe restaurant near @hidek's as the 4th after-patry. We had too many after-parties this week with a lot of fun!

Encode::JP::Emoji 0.60 Supports Unicode 6.0 Emoji!

October 11, Unicode Consortium released Unicode Version 6.0 including Emoji code points and the mapping table. Then, today, I've just shipped Encode::JP::Emoji version 0.60 which supports encoding conversion for variant emojis between Unicode 6.0 and Japanese mobile phone carriers as a fast pure Perl module.

use Encode;
use Encode::JP::Emoji;

my $sun = "\xF8\x9F";
Encode::from_to($sun, 'x-sjis-e4u-docomo', 'x-utf8-e4u-unicode');
# U+2600

my $watch = encode_utf8 "\x{231A}";
Encode::from_to($watch, 'x-utf8-e4u-unicode', 'x-utf8-e4u-kddiapp');
# U+E57A

The code above means:

$sun: from DoCoMo's F8F9 (Shift_JIS) to Unicode 6.0's U+2600.

$watch: from Unicode 6.0's U+231A to KDDI's U+E57A (UTF-8).

Encode::JP::Emoji's Encodings

Encode::JP::Emoji modules provides numbers of encodings.

Check the figures below to see which encoding to fit for your use.

Group #1 uses each carrier's private code points as Perl's internal string which has UTF-8 flag on.

Group #2 uses Googles's private code points internaly. This means Google's encoding could be the interchange encoding for others.

Group #3 also uses Google's internal.
See Unicode 6.0's emojis are supported here.

Tha last group #4 rejects any emojis above.
Use this group with FB_EMOJI_TEXT fallback function.

For more detail, see POD documents on CPAN.

* Original post of this is posted in Japanese.

img2html - bookmarklet for blog posting with flickr, picasa, etc.

The img2html bookmarklet below helps you to get a html source code with a <img> element which refers photo sharing service, ex. Yahoo's Flickr, Google's Picasa Web Album, etc.

img2html

You can also try just to click the link above for testing on the site.
It generates HTML source code like below:

<a href="Page URL" target="_blank" title="Page Title"><img src="Image URL" width="Image Width" height="Image Height" border="0" alt="Image ALT" /></a>

The largest image on page is picked up by the bookmarklet.
This works on flickr.

Also works on Picasa Web Album and any other websites.

Original post of this written in Japanese
fr - a bookmarklet to get a link to flickr (older version)

Cantonese Alphabet - iPhone app for traveling in Hong Kong

The Canotonese Alphabet mobile application is now available on iTunes App Store. This helps you to read Cantonese, spoken in Southern China including Hong Kong. It's just US$1.99. But this now!

To enter Cantonese phrases, use iOS's built-in Traditional Chinese hand-writing keyboard. The app also have online translation feature. This means you can translate English to Cantonese to read them in Cantonese.

The Last Piece

This was the latest member of the series of my Asian Alphabet applications.

Complete all five apps for Korean (Hangul), Chinese (Simplified and Traditional), Japanese and Cantonese!

Cantonese Alphabet - iPhone app for traveling in Hong Kong 2010.09.24
Japanese Alphabet - iPhone App for Kanji and Kana 2010.09.24
Simplified and Traditional Chinese Alphabet iPhone Application Shipped! 2010.02.27
The Korean Alphabet, iPhone app built by Flash 2010.02.17