If you know you think you know your objects from your arrays and your nullfrom your undefined, here's a quiz for you from Perfection Kills.

만약 당신이 객체와 배열, null과 undefined에 대해 잘 알고 있다고 생각한다면 여기 완벽하게 당신을 위한 퀴즈로 죽여라

I was recently reminded about Dmitry Baranovsky’s Javascript test, when N. Zakas answered and explained it in a blog post. First time I saw those questions explained was by Richard Cornford in comp.lang.javascript, although not as thoroughly as by Nicholas.

I decided to come up with my own little quiz. I wanted to keep question not very obscure, practical, yet challenging. They would also cover wider range of topics.

나는 최근에 N.Zakas의 블로그 표현과 대답했을때 Dmitry Baranovsky's의 자바스크립트 테스트에 대해서 상기했다. 처음 나는 comp.lang.javascript안의 Richard Cornford에 의해 표현되어진 아닐만큼 철저하게 Nicholas에 의해 질문을 보았다.

There are fourteen questions in all, starting here:

여기 모든 14개의 문제가 있다. 여기서 시작하라:

    (function(){
      return typeof arguments;
    })();

“object”

“array”

“arguments”

“undefined”

Aaron Boodman created Greasemonkey back in the day. He also worked on Gears. And most recently he created Chrome Extensions. I have a funny feeling that folks were pinging him daily "hey, when ya gunna give me Greasemonkey on Chrome" and he just delivered:

아론 부드맨은 전에 그리스몽키를 만들었다. 그능 또한 기어스에서 일했다. 그리고 최근 그는 크롬 확장을 만들었다. 재미있게 느끼는것은 여러분이게 그가 메일 외치는것이다. "이봐 크롬 에서 그리즈 몽키를 나아게 줘라" 그리고 그능 배달했다.   

One thing that got lost in the commotion of the extensions launch is a feature that is near and dear to my heart: Google Chrome 4 now natively supports Greasemonkey user scripts. Greasemonkey is a Firefox extension I wrote in 2004 that allows developers to customize web pages using simple JavaScript and it was the inspiration for some important parts of our extension system.

    Ever since the beginning of the Chromium project, friends and coworkers have been asking me to add support for user scripts in Google Chrome. I'm happy to report that as of the last Google Chrome release, you can install any user script with a single click. So, now you can use emoticons on blogger. Or, you can browse Google Image Search with a fancy lightbox. In fact, there's over 40,000 scripts on userscripts.org alone.

구글 크롬 4는 사용자 그리즈 사용자 스크립트을 기본적으로 지원하게 되었다. 그리즈몽키는 파이어폭스 플러그인이다. 내가 2004에 웹페이지를 커스터마이징 할수 있게 개발자들을 따랐을때 간단한 자바스크립트와 이것에 영감을 었어 우리의 확장시스템의 일부로써 중요하다.

Not all of the scripts will work. The deeper the integration, the less chance of success. We now have user scripts supported in a variety of browsers, and hopefully they get more and more portable.

모든 스크립트가 동작하진 않는다. 이것은 깊숙하게 통합되어있고 성공적으로 바꾼다. 우리는 다양한 브라우저의 사용자 스크립트를 지원하는것을 가지고 있다. 그리고 그것들이 머 많은것이 가능하도록 희망하고 있다.

If browsers could surface the functionality to mainstream users, good things could happen beyond us power users.

만약 브라우져들이 주류 유져들의 기능저인 표면을 할수있다면 상품은 우리 파워유져들 뒤에 있을것이다.

SVG-Edit is a nifty open source editing web app that uses SVG and doesn't need a server-side:

SVG-Edit 는 서버사이드를 필요로 하지않고 SVG를 이용하는 실용적인 오픈소스 에디팅 웹 어플리케이션이다.

The SVG-Edit team recently announced SVG-Edit 2.4, code named Arbelos. New features include:

SVG-Edit 팀은 최근 SVG-Edit 2.4를 내놨다. 코드 네임은 Arbelos이다. 새로운 기능은 다음을 포함한다.

- Raster Images - 바둑판식 이미지
- Group/Ungroup - 그룹, 언그룹
- Zoom - 줌
- Layers - 레이어
- Curved Paths - 곡선경로
- UI Localization - UI 지역화
- Wireframe Mode - 와이어 프레임 모드
- Change Background - 배경 바꾸기
- Draggable Dialogs - 드러그 가능한 다이얼로그들
- Resizable UI (SVG icons) - 크기조정 가능한 UI (SVG 아이콘들)
- Convert Shapes to Path - 모양을 경로로 바꿈

Try out the demo here:

여기 데모가 있다.
http://svg-edit.googlecode.com/svn/branches/2.4/editor/svg-editor.html

Check out the project page:

프로젝트 페이지를 체크하라
http://svg-edit.googlecode.com

Read the release notes:

릴리즈 노트를 읽어라
http://code.google.com/p/svg-edit/wiki/VersionHistory

What can you do if you want to enable a fullscreen experience on the Web? You can't. Or, use Flash. Some claim that you shouldn't offer this ability as it is a security liability. Someone can put a fullscreen view that tricks the user into giving it information.

만약 당신이 웹의 전체화면의 경홈을 사용하기를 원한다면 어떻게 하겠는가. 당신은 할수 없다. 또는, 플래시를 상용한다. 몇몇의 요구는 보한 책임에 의해 그것의 능력을 사용하지 않는다. 어떤이는 정보를 주는 수법으로 전체화면에 출력할수 있다.

However, as much as I think user security is important, it doesn't seem like we can punt and not do anything because of this. A user agent can do a lot of things to help out.

그러나, 내가 사용자 보안을 중요하다고 생각하는 만큼, 우리가 punt하기 좋아하지 않는것처럼, 이것의 이유는 아무것도 아니다. 한 유저는 돕기위해 많은것을 있다.

Some (majority?) of the use cases revolve around full screen video. Eric Carlson has a WebKit checkin that enables that one case. You canwebkitEnterFullScreen() on a HTML5 video element and be on your way.

You can see this in action on the SublimeVideo HTML5 player. Play the video in WebKit nightly and alt-click the "full size" arrows.

Video is great, but what about general purpose? What if you could fullscreen any element? Robert O'Callahan threw up a strawman:

1. Should be convenient for authors to make any element in a page display fullscreen
2. Should support in-page activation UI for discoverability
3. Should support changing the layout of the element when you enter/exit fullscreen mode. For example, authors probably want some controls to be fixed size while other content fills the screen.
4. Should accommodate potential UA security concerns, e.g. by allowing the transition to fullscreen mode to happen asynchronously after the user has confirmed permission

New API for all elements:

PLAIN TEXT

JAVASCRIPT:

1.  
2. void enterFullscreen(optional DOMElement element, optional Screen, optional boolean enableKeys);
3. void exitFullscreen();
4. boolean attribute supportsFullscreen;
5. boolean attribute displayingFullscreen;
6. //"beginfullscreen" and "endfullscreen" events
7.  

While an element is fullscreen, the UA imposes CSS style "position:fixed; left:0; top:0; right:0; bottom:0" on the element and aligns the viewport of its DOM window with the screen. Only the element and its children are rendered, as a single CSS stacking context.

enterFullscreen always returns immediately. If fullscreen mode is currently supported and permitted, enterFullscreen dispatches a task that a) imposes the fullscreen style, b) fires the beginfullscreen event on the element and c) actually initiates fullscreen display of the element. The UA may asynchronously display confirmation UI and dispatch the task when the user has confirmed (or never).

The enableKeys parameter to enterFullscreen is a hint to the UA that the application would like to be able to receive arbitrary keyboard input. Otherwise the UA is likely to disable alphanumeric keyboard input. If enableKeys is specified, the UA might require more severe confirmation UI.

In principle a UA could support multiple elements in fullscreen mode at the same time (e.g., if the user has multiple screens).

enterFullscreen would throw an exception if fullscreen was definitely not going to happen for this element due to not being supported or currently permitted, or if all screens are already occupied.

Much talking of exact API issues and more security.... but hopefully inertia does it job and we get something.

Would you like a fullscreen API?

As part of an upcoming article on geo location I am putting together a few Geo Toys for myself and here is the first one. Addmap.js is a JavaScript that analyses an elements text content, finds geographical locations and links them to Google Maps. It also adds a map preview and a list of the found locations to the element.

지리적 위치의 문서의 일부로서 나는 나자신과 여기에 처음으로 지리적 장난감을 함께 걸었다. Addmap.js 는 하나의 엘리먼트 텍스트 컨텐츠를 분석하여 지리적 위치를 찾고 구글맵에서 그것을 링크하는 자바스크립트다. 이것은 또한 지도 미리보기가 추가되며 엘리먼트의 위치들의 리스트를 찾을수 있다.

See addmap.js in action below - all the content in the green box is generated from the paragraph of text above it. You can try it out for yourself by clicking the screenshot.

아래의 작업에서 addmap.js 를 봐라 - 모든 내용안의 녹색박스는 그위의 텍스트 단락에 의해 생성된것이다. 당신은 스크린샷에 클릭함으로써 스스로 시도해볼수 있다.

Using addmap.js is easy - sign up for a Google Maps Key and provide it as a configuration parameter. Then call the analyse function with the ID of the element to analyse as the parameter:

addmap.js를 사용하는것은 쉽다. 이것이 제공하는 설정 매개변수를 위해 Google Maps Key에 가입하라. 그다음 매개변수를 분석하기위한 엘리먼트의 ID를 분석 함수를 호출하라

The script uses YQL and Yahoo PlaceMaker under the hood, for more info and updates on this, check the blog.

스크립트는 YQL과 Yahoo PlaceMaker 후드 아래 쓰인며, 더 많은 정보와 업데이트는 여기 블로그를 확인하라

Román Cortés is having a lot of fun with CSS tricks these days. He just built an example rolling CSS coke can that uses background-attachment, background-position, and a few other tricks to get the effect. No fancy CSS3 needed here!

로마 코르테스는 CSS 트릭으로 매우 재미있는것을 최근에 가지고있다. 그는 background-attachment, background-position와 몇개의 효과를 얻기위한 다른 트릭들을 이용해 콜라켄을 돌릴수있는 예제를 많들었다. 여기서는 CSS3가 필요하지않다!

The key pieces used:

중요한 사용한 조각:

p {
        background-image: url(coke-label.jpg);
        background-attachment: fixed;
        background-repeat: repeat-x;
        width: 1px;
}
 
#x1 {background-position: 5px 30px;}
#x2 {background-position: 0px 30px;}
#x3 {background-position: -3px 30px;}
#x4 {background-position: -6px 30px;}
#x5 {background-position: -8px 30px;}
 

It helps to see the can and the wrapper that is placed around it.

이것은 이것을 감싸는것을 도울수 있다.

takeone

당황스러울 정도의 예제네요. 이제 순수 CSS효과로도 멋진 효과를 만들수 있겠군요. 빨리 CSS3가 정착되었으면 합니다.

The Freeciv.net crew has benchmarked a path in their canvas game. It is one data point, and tests more than just Canvas itself because a lot of code is running in the game. Thus, it ends up testing the union of a particular JavaScript path and the rendering of the canvas.

Freeciv.net 승무원이 그들의 켄버스 게임안에 경로를 벤치마킹했습니다. 이것은 하나의 데이터 포인트로 다만 게임안에서 수많은 코드들이 실행되는거에 대한 테스트입니다. 하지만 이걸로 특정 조합의 자바스크립트 경로와 켄버스 랭더링을 테스트하는것을 끝냈습니다.

Here are the results:

그 결과 입니다.

With Bespin we had slightly different results, and the bulk of the bottleneck was in the blitting of the canvas. Optimizations were made to canvas over the initial phase of Bespin so the various browsers would leap frog each other. Good times :)

우리는 약간의 다른 결과와 함께 대량의 병목현상이 컨버스의 blitting 에 있습니다.

굿타임! :)