JSON Diff 릴리스

2008. 7. 18. 02:18 from [IT] Web Tech
Tom Robinson씨가 매우 유용한 JSON Diff 유틸리티를 작성하셨습니다. 이 유틸리티는 차이점을 그래픽으로 볼 수 있게 해줍니다.
사용자 삽입 이미지
변경된 부분은 노란색으로, 추가된 부분은 녹색, 삭제된 부분은 빨간색으로 각각 표시됩니다.

from JSON Diff Released
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

Web 2.0 버튼 생성기

2008. 6. 30. 21:14 from [IT] Web Tech
Web 2.0 버튼을 생성해주는 "AS 버튼 생성기" 입니다("AS"가 ActionScript의 약자가 아닐까 생각합니다).
사용자 삽입 이미지
플래시 기반이라 드래그앤드롭으로 텍스트를 떨구거나 스프라이트, 다중 그래디언트 효과 등의 다양한 실시간 인터랙션을 제공합니다.
사용자 삽입 이미지
Dion씨가 본 버튼 생성기 중에서는 최고라네요. 멋져요!

from Yet Another Web 2.0 Button Generator
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

사용자 삽입 이미지
Nitobi 에서 크로스 브라우저 디버깅 스크립트인 NitobiBug를 릴리스했습니다:
이것은 브라우저 기반의 JavaScript  객체 로거이자 인스펙터입니다 - Firebug와 유사하죠. NitobiBug는 일관성과 rich Ajax 응용프로그램 개발을 위한 강력한 도구를 제공하기 위해 다른 브라우저에서도 동작합니다(IE6+, Safari, Opera, Firefox).
이렇게 사용할 수 있습니다:
[code:js]
// inspect an object
var myObject = {a:234523, something:'else', mylist:[32423,4556,'sdfs']}; nitobi.Debug.log(myObject);
 
// inspect a DOM element
var myDomObject = document.getElementById('someID'); nitobi.Debug.log(myDomObject);
 
// output text
nitobi.Debug.log("This is a test");
창의 위치를 기억하며, DOM 디버그 창의 "show me" 링크를 클릭하면 강조된 엘리먼트를 (가능하다면) 보시게 될 것입니다.


from NitobiBug: Cross browser debugging
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

Peter Michaux씨가 xmake라는 make 혹은 rake 같은 JavaScript 유틸리티를 작성했습니다.

Xmakefile.js를 다음과 같이 작성하고:
[code:js]
/ defines println

require('helpers');
 
xmake.task('low', function() {
  println('low');
});
 
xmake.task('mid1', ['low'], function() {
  println('mid1');
});
 
xmake.task('mid2', ['low'], function() {
  println('mid2');
});
 
xmake.task('high', ['mid1', 'mid2'], function() {
  println('high');
});
이런 명령어를 통해 실행할 수 있습니다.

xmake [-f filename] taskname

이는 Peter씨가 작성한 서버 사이드 JavaScript 프레임웍인 xjs를 이용해서 작동합니다.

from xmake : a JavaScript make-like utility from Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

사용자 삽입 이미지
Opera에서 새로운 멋진 웹 디버깅 툴 Opera Dragonfly가 알파버전으로 릴리스 됐다고 합니다.

JavaScript 디버깅, CSS와 DOM 조사(inspect), 에러 보기 - Opera Dragonfly는 Opera를 사용한 개발을 컴퓨터나 모바일 전화기에서나 한층 쉽게 만들어줍니다.

Shawn Lauriat씨가 관련된 이야기에 대해 글을 썼습니다.

기능

  • 단계별 중단점 설정: Opera Dragonfly의 풍부한 기능을 갖춘 JavaScript 디버거는 복잡한 Ajax 응용프로그램을 보다 쉽게 작성하도록 합니다. 코드를 줄 단위로 실행하며, 중단점을 설정할 수 있습니다. 이를 이용해 설계한 대로 스크립트가 잘 동작하는지 확인할 수 있습니다.
  • 스타일 재정의: 조사할 수 있는 것은 DOM 만이 아닙니다. 엘리먼트에 어떤 CSS가 적용되었는지, 무엇을 상속받았는지 혹은 브라우저에 의해 기본값으로 설정된 것은 무엇인지 확인할 수 있습니다. 재정의된 규칙은 강조되므로 어떤 스타일이 적용되고 어떤 스타일이 적용되지 않았는지 알 수 있습니다. CSS 규칙 편집 기능은 다음 버전에서 추가될 것입니다.
  • 에러 검출: 개선된 오류 콘솔은 스크립트에서 발생한 오류 기록을 보거나 필터링 할 수 있으며, 에러가 발생한 정확한 위치를 가리킵니다. 사이트의 버그를 찾아내고 수정하는데 다른 툴과 이를 조합해서 사용하세요.
  • DOM 디버깅: 소스 보기는 DOM을 대체하는 DOM스크립팅을 사용할 때 유용하지 않습니다. Opera Dragonfly는 업데이트된 DOM 및 모든 프로퍼티를 조사할 수 있습니다. DOM 편집 기능은 다음 버전에서 추가될 것입니다.

몇몇 기능들은 아직 포함되지 않았으나 곧 포함될 예정입니다. 이를 테면, CSS, JavaScript, DOM 편집 지원, 단일창 모드, 개선된 JavaScript 스레드 핸들링, XHR과 HTTP 모니터링, 개선된 키보드 네비게이션, 여러 언어로 번역 등이 있습니다.

Firebug는 이제 웹 브라우저 디버거들의 기준이 되어버린 느낌입니다. 무료로 사용할 수 있는 Firebug 수준의 디버거들이 여러 브라우저에서 늘어나기만 한다면 정말 대환영일 것 같습니다. Dragonfly가 제 역할을 해준다면 이제 사파리하고 IE만 남았군요.

from Opera Dragonfly : New Web Tooling on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

Tor Norbye씨가 JavaScript에서 Netbeans가 지원하는 타입 추론에 대한 글을 썼습니다:

Roman Strobl씨가 NetBeans 6.1의 새로운 JavaScript 편집기에 대한 스크린캐스트를 공개했습니다. 데모는 약 5분간이었고, 여러 편집기능을 강조했습니다.

저는 타입 추론부분에 대해 조금 부연해볼까 합니다. 데모 영상의 4분쯤에, Roman 씨는 Netbean가 함수 호출까지 감안해서 타입을 알아내는 것을 보여주었습니다. 그의 예제에서, 모든 타입은 문자열이 되었고 그래서 우연히 잘 맞은 것처럼 보였습니다. 그건 아닙니다! 무슨 일이 일어나는지 보다 자세하게 보여줄 코드 예제를 준비했습니다.

그는 단계별로 진행과정을 보여주며 실제 어떻게 IDE가 정보를 얻는지 설명했습니다. 이렇게 실시간으로 타입을 직접 추론하는 것은 IDE로서는 처음이지 않을까 싶습니다. 멋지네요!

Netbeans

from JavaScript Type Inference in IDEs on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

Vishal Shah 씨가 TPHP - "The Perfect HomePage" 라는 이름의 코드를 작성했습니다. JavaScript를 포함한 단순한 HTML 페이지인데, 커맨드 라인 형태로 명령을 내릴 수 있도록 되어있습니다.

프로젝트 소개를 보면 인터넷 항해의 첫번째 출발 지점이 되고 싶었다고 밝히고 있습니다.

기존에 있던 프로젝트인 Enso와 비교가 됩니다. Enso도 지금은 Mac과 Linux를 지원하고 있습니다.

from TPHP : Your home page can be a JavaScript command line on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

사용자 삽입 이미지
Christopher Keene씨가 Wavemaker의 새로운 맥 버전에 대해 말했습니다. 오픈소스 CEO 컨퍼런스에 갔더니 세션의 10명중에 자기 혼자 PC 사용자였다는군요 :)

이번 주에, 저희는 맥용(정확히는 OS 10.5 레퍼드) WaveMaker와 Safari를 릴리스 했습니다. 맥은 시각적인 플랫폼이이지만, WYGIWYG 개발툴에서만큼은 뒤쳐져있었습니다. 이제 Wavemaker로 맥도 앞서가게 되었습니다.

그리고는 맥을 사용할 수 밖에 없는 이유를 설명했습니다:

  1. 선택받은 Ajax 플랫폼: Safari는 작고 빠르며 표준을 잘 따릅니다. 마지막으로 Internet Explorer에서 웹 프로그램을 실행했던게 언제인지 기억도 안납니다. 만약 Firebug가 Safari로 이식만 된다면, Firefox는 곤란해질겁니다.
  2. 선택받은 Video 플랫폼: 우리는 WaveMaker의 새로운 스크린 캐스트를 만드느라 죽음의 3월 3째주를 보냈습니다. 그 시간 중에 8시간 가량은 콘텐트를 만드는데 썼고 나머지 시간은 PC에서 우리가 사용하던 멍청한 동영상 소프트웨어(Camtasia)와 씨름하는데 사용했습니다. 반면에, 12살난 제 큰 조카딸은 i-movie를 이용해 30분만에 수업용 프리젠테이션을 만들었습니다. 말 다했죠.
  3. 줄어드는 데스크톱의 입지: 점점 더 멋진 웹 응용프로그램들로 인해, 점점 제 Windows 데스크톱에서 작업하는 시간이 줄어들고 있음을 발견했습니다.
  4. Vista라는 이름의 재앙: XP에서 Vista로 옮기기 위해사용자 인터페이스를 모조리 새로 배우는 것보다는 차라리 맥의 인터페이스를 배우는게 더 나을 겁니다.
  5. 맥 노트북의 멋진 발광 로고: 현실을 직시하세요 - 오늘날에는 커피샵에서 멋져 보이는 것이 아마도 Ghz나 RAM 보다 더 노트북을 팔고 있습니다.
from WaveMaker Visual Ajax Studio for Mac on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

iPhone 원격 디버거

2008. 4. 24. 00:38 from [IT] Web Tech

Jon Brisbin씨는 iPhone 개발을 하는 Java 개발자인데, 보다 나은 iPhone 원격 디버거가 필요한 가려움증을 스스로 해결하기로 하고 iPhoneDebug를 만들었습니다:

iPhone Debug Consle 은 개발 중에 iPhone/iPod Touch 을 더 잘 보고 더 잘 동작해보기 위해 만들어졌습니다. 저는 "console.log 구문을 넣은 뒤에 리로드"해야 하는 디버깅 방법에 좌절하고 있었습니다. 저는 Firebug의 콘솔과 디버거 같이 끝내주는 무엇을 원했습니다.

페이지와 상호연동할 방법이 없었기 때문에 iPhone/iPod Touch 응용프로그램을 디버깅하려는 저의 노력은 점점 실패로 느껴졌습니다. console.log 구문을 넣고 페이지를 리로드 하기 전에는 변수값과 CSS 값을 얻어낼 수도 없었습니다. 이건 아니다 싶었습니다.

제가 필요로 하는 것을 찾던 중에, Joe Hewitt씨의 iPhone/Firebug 통합본을 보게 되었습니다. 하지만, 저는 데스크탑 브라우저에서 firebug나 "console.log" 없이도 동작할 수 있는 보다 굳건한 무엇을 원했습니다.

Java 개발자인 저는, 자연스럽게 데스크탑 브라우저와 iPhone간의 메시지 전달을 위해 COMET과 Jetty의 이용을 고려하게 되었습니다. 며칠이 지난 뒤에, 실행가능한 해결책이 나왔습니다. 그것은 모바일 JavaScript의 것을 데스크탑 콘솔에 기록할 수 있었는데, 제 경우에 있어 가장 큰 이점은 결과를 제 데스크탑 콘솔로 받으면서 iPhone에서 실행할 JavaScript를 보낼 수 있었다는 것입니다. Firebug와 마찬가지로, 메소드를 호출하고 CSS 값을 가져오고, Firebug로 응용프로그램을 작성할 때 사용했었던 디버깅 방법들이 모두 가능합니다.

아래가 실제로 동작하는 화면입니다:

Issuing Commands in ipd Console

Issuing Commands in ipd Console


from iPhone Remote Debugger on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요