release recent posts



第二回全国統一 HTML5実力テスト」の応用編コースがリリースされました。


「第二回全国統一 HTML5実力テスト」は、株式会社ディー・エヌ・エー、日本マイクロソフト株式会社、グーグル株式会社の協力を得て実施されます。



  • 穴埋め式問題

    practical_dnd.png 候補解答から解答を選んで、ドラッグ&ドロップで空欄に埋めることで解答できます。

  • 記述式問題

    practical_coding.png 問題の説明と例の挙動に沿って、コードを補完して解答します。


HTML5実力テスト 応用編

「第二回全国統一 HTML5実力テスト」応用編コース概要

問題作成 : 面白法人カヤック
問題監修 : 株式会社ディー・エヌ・エー

Improvements on code editor in Jan, 2013

Happy new year, everyone! How about the first month of 2013? There's only one week left for Januaray. Times goes by so fast. So let's speed up!

Talking about, in January, we've added some new features for our code editor.

  • Keyboard shortcuts

    We've added keyboard shortcuts for tab switching, saving and reloading preview.

    Ctrl + 1 / ⌘ + 1 Switch to README tab
    Ctrl + 2 / ⌘ + 2 Switch to JavaScript tab
    Ctrl + 3 / ⌘ + 3 Switch to HTML tab
    Ctrl + 4 / ⌘ + 4 Switch to CSS tab
    Ctrl + 5 / ⌘ + 5 Switch to File tab
    Ctrl + 0 / ⌘ + 0 Switch to Properties tab
    Ctrl + s / ⌘ + s Save manually
    Ctrl + r / ⌘ + r Reload preview

    And the shortcuts can be also referred from the Keyboard shortcuts button in the bottom right corner.

  • Auto-saving

    After the code is edited, it'll be automatically saved. If you want to turn off this feature, you can just turn off the checkbox named as Auto in the top right corner. And please pay attention that if the auto-saving is turned off, the preview will not be reloaded automatically after saving.


  • Fixing display on iPhone & iPad

    We've fixed display problem that occurs when the editor is zoomed in/out on iPhone and iPad. Now you can use iPhone or iPad to edit your code.

  • Color scheme

    If you click the button in the bottom of the code editor, a color scheme panel will show up. And you can choose any theme you like as your default choice. You can also change the setting in your account setting page.


  • Thumbnail uploading

    Now we make it able for users to upload any picture they want for the code thumbnail. You can do it in code properties tab. And any JPG, PNG or GIF picture in 465px * 465px size can be used.


Why not have a try right now?

With our best wishes

Summary of updates in late 2012

The end of 2012 is finally coming.
By this, we would like to look back and introduce all the updates of in late 2012! Let's look back and maybe there're some new features you still don't know?!

Code view page

  • Positioning of Diff Button
    You can see the difference with the forked file by clicking View Diff button on the right-top corner.

  • Brushing Favorite Feature
    Now you can add/remove favorite without reloading the page.

  • Adding Post to QA Button
    If you have any question about the code, you can directly post it to the QA section from the view page.


  • Uploading of Files Other than Images and Audios Enabled
    The limitation is opened, and you can post any file besides images and audios. You can also upload XML files.

  • Upload Capacity Up to 1MB
    The upload capacity is upgraded from 100KB to 1MB, which times the previous by 10.

  • Changing Precompiler UI to Pulldown Menu
    The language assignment, which was done by comment, can be made directly from the pulldown menu now.

  • Supporting SCSS, LESS in CSS Precompiler
    We added SCSS, LESS support to CSS precompiler.

  • Supporting Compass in CSS Precompiler
    We add the Compass alternative when you want to use SCSS. @import also supported.

  • Supporting TypeScript in JS Precompiler
    We've added TypeScript option, which is a language developed by Microsoft.

  • Supporting Zen Coding
    Now you don't need to write each HTML tag, because the convenient Zen Coding tool is available in our editor.

  • Supporting Markdown
    Now you can use Markdown syntax in README. The usage can be referred from here.

  • Linking Gist
    By linking Gist, you can control the version of the code. (To link, you can find the "Save to Gist" link from the Save button's options)

User page

  • Portofolio
    You can choose the codes that you want to show off. And you can also see a lot of parameters about yourself here.

  • Add Awarding History to Portofolio
    We've added awarding history in the past contests to the portfolio page. You can even make use of the portfolio in job finding.

  • Enabling Adding Social Account to Portfolio (Twitter, Facebook, Google+, Github)
    To add social account icon, you can go to the setting page to set your social accounts. To can make the setting from here!

  • Supporting Markdown
    Not only the README of your codes, you can also write Markdown in your profile, discussions.

  • Adding Email Address
    Now you can add your email address in the setting page. By this, you can recieve the information of new events and mail magazines from
    You can add your email address from here!


  • Updating Helps (in Japanese and English)
    We've also updated the helps together with the new features listed above.

  • Applying SSL to Part of the Website
    To enhance the security, we've applied SSL to some part of our website.

  • Code Capturing Done by PhantomJS instead of Firefox
    By this, we have reduced a lot of time when capturing the codes.

  • Notifications from And Desktop Notification
    We've added notification features. Desktop notification is also available.

How about these new features? Do you find any that you haven't found before?

By this, we are going to say bye-bye to 2012. We wish a happy new year to you. And welcome to use also in 2013! Looking forward to your code posts!

Invitation for CSS "HENTAI" Programmers in the world!

※This is the article written for the 25th day (the final day) of the CSS Programming Advent Calendar 2012.

For details about CSS Programming, please refer to this article.


Hello, this is the team! Thanks for using our service!

To answer the passionate encouragement from the CSS "HENTAI" Programmers in the world, we team have prepared a Christmas present!

Translation: I believe that won't simple write a summary post only.

Translation: I can't help wanting to see the fantastic CSS Programming example and the summary post made by #jsdoit 's staffs, right now!

Translation: We love

Translation: So there's no possibility that team don't make it. They have to take the responsibility of a company.

Wow, really passionate encouragement...isn't it? (・ω・`;)

Anyway, we wish everyone a merry Christmas and a Happy CSS Programming!


Improvements on code editor

We have some improvements on code editor/viewer.

  • Support syntax highlight and auto indentation of JSX, CoffeeScript, and LESS.
  • Code Folding
  • Search/replace

Press ctrl-q or click on the gutter to fold a block, again to unfold.

Search/replace keybindings are:

Ctrl-F / Cmd-F
Start searching
Ctrl-G / Cmd-G
Find next
Shift-Ctrl-G / Shift-Cmd-G
Find previous
Shift-Ctrl-F / Cmd-Option-F
Shift-Ctrl-R / Shift-Cmd-Option-F
Replace all


JSX, CoffeeScript support!

We support 2 features!

  • The new languageJSX create rapid JS.
  • The remarkable scriptCoffeeScript affects next generation ECMAScript.

To use JSX, put "// #!jsx" on top of JS code.


To use CoffeeScript, put "#!cooffeescript" on top of JS code.


Edit Private Code

Thanks for many requests!
Finally, you can make your code "private".

Touch the "Properties" button next to the code title, in code edit view.


You'll see a dialog to edit code properties,
check the "Private" checkbox, and "Save".


"Private" code won't appear in code ranking, nor in your followers dashboard( or mypage). It will only be visible by yourself.

Use it for drafts, or secret hacks:)


location.hash set to code page.

location.hash set to code page.

link to is location.hash === '#hoge'

Mini-game collaboration event with 9leap will be providing it's platform for 9leap's mini-game contest, leveraging on HTML5/JavaScript Based Game Engine - enchant.js.
Find more information here (in Japanese).

fork tree with API

We have added a new feature to list ancestor codes and child branches with a "fork tree". When the code has forked version or itself is a child branch of an existing code, then "tree" link will be displayed on the info, so that you can track down the fork history.



Along with creating this feature, we have started rolling out API. API's documentation

The domain is "", but we have set the Access-Control-Allow-Origin header to make access possible via ajax. Try building your own original fork tree.

Forked codes used to release tags from original code. Now we have enabled inheriting tags from original codes to forked ones.


When issuing a tag for external embedded player, now you are able to choose 'preview' or 'code' for initial view.

You can apply the same feature for existing older tags, by adding '?view=design' to the end of JavaScript URL.


While logged in to, you can see 'notifications' displayed next to your name on upper right header menu.

  • When someone starts following you
  • When someone forks your code
  • When someone adds your code to favorites
  • When someone comments on your code
Once there is any activity relevant to you or your code, you will see these in 'notifications'.

We hope this positively stimulates everyone for more active community engagement. We would be glad to see more of your followers, and would be happy to favorite and comment on your entries as well.


Now you can directly add html tags.

Responding to several requests received via Q&A, we have significantly improved html support.

iDevice test

When code within html area begins with either <!DOCTYPE or <html, any entered code will be output adding JavaScript and CSS.


Now the new editor comes with shortcut keys.

You can move between JavaScript, html and CSS windows using Ctrl +↑ (or Pg Up), Ctrl +↓ (or Pg Dn).

Also, you can save the work or reload it using Crtl + Enter.

(* These shortcuts are valid only if you have chosen ACE Editor as your preference)


Now you can use the new editor - faster, lighter.

Until now, we've been primarily using CodeMirror for scripting. From today you can choose to work on ACE - Code Editor as well.

If you wish to try the new editor, please go to your account settings, and check the 'use JavaScript New editor (beta)'.

* Some features are still being polished up


jQuery 1.4.3 and

added jQuery 1.4.3 and jQuery mobile 1.0 alpha 1 as "Major Libraries".

so you can click on the "Add Libraries" button and choose them, to give it a try!
or fork this template to start:
forked from: minimum jQuery mobile 1.0 alpha1

thanks to hfu for the example and GeckoTang for the request

let's write code description

From today, you're able to add a "description" for a code.

You might want to write:

  • some references, what inspired you to write it

  • how to interact with your Flash content

  • the core logic, any explanation about the code

  • any requests for other wonderfl users to fork and modify

  • what you think is cool about the code you wrote

  • .. or anything

HTML tags are not allowed but URLs will be auto-extracted as anchor tags.
We did some comment-parsing-and-extract-what-looks-like-description from past code, so some might already have description, but write it by yourself for future codes.


Released diff feature

Click on the "diff" link on code pages and see which rows have changed from the forked parent!
For a good example see: PAC-MAN2
and click the diff(153) on the top.

updated Processing.js to 0.9.6

Updated our processing.js in our Major Libraries selection from 0.9.4 to 0.9.6 ! (changelog)

We believe is one of the easiest way to try JavaScript/CSS libraries, because of the "Fork" and "Question" feature.
If you use a library not listed in our Major Libraries list and want it included, please contact us.