release recent posts

practical_top.png

3つの応用編コースがリリース

ブラウザ上でHTML5のコーディング力を測ることができるオンライン試験、
第二回全国統一 HTML5実力テスト」の応用編コースがリリースされました。

新しい問題形式で作られた今回の試験問題は、知識の実用性を重視しています。
難易度が上昇したと同時に、より実務的なスキルチェックができるようになります。

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

新たな問題形式をご紹介

新設されたHTML/CSS、JavsScript、iOS/Androidの応用編コースの問題は、従来の選択式をなくしています。
今回の問題は、候補解答から解答を選んで空欄に埋める穴埋め式と、
その場でコーディングする記述式のふたつのタイプに分けられています。

  • 穴埋め式問題

    practical_dnd.png 候補解答から解答を選んで、ドラッグ&ドロップで空欄に埋めることで解答できます。
    また、ダブルクリックで、自動的に空欄に当てはめることもできます。

  • 記述式問題

    practical_coding.png 問題の説明と例の挙動に沿って、コードを補完して解答します。
    記入したコードはシステム側で自動に採点されます。

なお、応用編コースはPCのみの受験になりきます。
受験すると、自分の得点のほか、偏差値や順位が結果として表示されます。

より実践的に実力を試すことができる、
HTML5実力テスト 応用編
いますぐ受験して実力を判定しましょう!

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

URL : http://jsdo.it/event/html5cat/2012/autumn
開催期間:2012年1月30日~
問題作成 : 面白法人カヤック
問題監修 : 株式会社ディー・エヌ・エー

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 jsdo.it, 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.

    autosave.png

  • 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.

    theme_selector.png

  • 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.

    snapshot_upload.png

Why not have a try right now?

With our best wishes

Summary of jsdo.it 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 jsdo.it 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.

Editor

  • 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 jsdo.it.
    You can add your email address from here!

Others

  • 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 jsdo.it 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 jsdo.it 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 jsdo.it team! Thanks for using our service!

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

Translation: I believe that jsdo.it 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 jsdo.it.

Translation: So there's no possibility that jsdo.it 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!

↑↑↓↓←→←→BA

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
Replace
Shift-Ctrl-R / Shift-Cmd-Option-F
Replace all

editor_improvements.png

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.

jsx_sample.png

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

coffeescript_sample.png

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.

code_01.png

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

code_02.png


"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:)

Enjoy!

location.hash set to code page.

location.hash set to code page.

link to http://jsdo.it/kyo_ago/otyt#hoge is location.hash === '#hoge'

Mini-game collaboration event with 9leap

jsdo.it 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 jsdo.it 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.


190325.png


190250.png


Along with creating this feature, we have started rolling out jsdo.it API.

jsdo.it API's documentation

The domain is "api.jsdo.it", 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.

inheritance_tag.png

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.

embed_player.png

While logged in to jsdo.it, 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.

notification.png

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.

directly_add_html.png

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)

shortcut_keys.png

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 - Ajax.org 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

newEditorSetting.png

jQuery 1.4.3 and jQuery.mobile

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

jquery.mobile.png

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.


ScreenShot1.png
ScreenShot2.png

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 jsdo.it 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.