웹 에디터

http://www.coderun.com/ide/

 


Google Code 에서 이제 CodeMirror 자바스크립트 에디터를 적용해, 웹브라우저 상에서 직접 코드 수정이 가능하게 되었습니다 http://j.mp/idozTS , CodeMirror 는 코드편집용 온라인 에디터 자바스크립트 라이브러리로 JS/CSS/파이썬/루아/C# 등 다양한 언어 컬러링/들여쓰기를 지원합니다. http://CodeMirror.net


아이패드 사파리에서 현재 웹사이트의 소스를 쉽게 보기 위한 북마클릿 http://j.mp/gD3ayi 아이패드용 웹 페이지 개발할때 유용하겠네요


TestFlight -- 아이폰 앱 베타테스트를 손쉽게! IPA업로드하고 이메일 적으면 배포완료. 업데이트 역시 Over-The-Air 로 가능한 웹 서비스. 개발자에겐 무료 http://j.mp/hkmyCs , 기존 아이폰 앱 베타테스트는 UDID를 적고 업데이트할 때 마다 재 배포 하는 작업이 귀찮았는데, 이걸 더욱 편하게 만들어줍니다


Wire It -- 웹에서 와이어링을 가능하게 해주는 오픈소스 자바스크립트 라이브러리. 데이터플로우,비주얼 프로그래밍,그래픽 모델링등에 사용 http://j.mp/f0PyJK 야후Pipes의 에디터를 똑같이 만들수 있겠네요.


Appcelerator vs. Phonegap vs. Adobe Air Mobile 3가지 크로스 플랫폼 개발툴 비교표 http://j.mp/gqt2xN


http://MediaQueri.es -- 다양한 해상도/디바이스를 지원하는 Responsive 웹 디자인이 적용된 사이트들 모음. 올해는 타블렛때문에 이 Responsive Design 이 대세가 될 겁니다. 꼭꼭 참고하시고 사이트 개발시 적용해보세요. Handcrafted Pixels http://j.mp/fPhmWP , 같은 사이트도 있습니다. 데스크탑에서 접속해서 브라우저 사이즈를 조정해보시거나 스마트폰에서 접속해 보세요


크로스 브라우징 가능한 HTML5 Form 개발 방법 http://j.mp/hDN61l


Fake it ’til you make it http://j.mp/g8E5Va 네이티브앱처럼 느껴지는 모바일 웹앱 만들기. 정리가 잘된 슬라이드네요 총 82페이지


Beyond the Mobile Web http://j.mp/evkVa2 모바일과 웹에 대해 멋진 인사이트를 담고 있는 총 132페이지 짜리 초강력 추천 슬라이드.


Rare Javascript Operators http://j.mp/i7OIhV 잘 안쓰는 자바스크립트 오퍼레이터들을 설명하는 슬라이드. 꽤 재미있네요. ~(틸데),get과set,콤마,==와===의 퍼포먼스 차이


개발자/디자이너가 알아야 할 50가지 http://j.mp/jEOyGY , 글의 원 제목은 ‘Graphic Design Student 가 알아야 할 50가지’ 입니다만, 꼭 그래픽 디자인 뿐만 아니라 개발자들에게도 적용되는 리스트입니다. 정말 좋은 리스트 업.


320 and up -- 작은 사이즈의 모바일 화면을 위한 Bolierplate http://j.mp/kChpGn 여기저기서 얘기되는 Mobile First! 전략과 딱 맞는군요


MSDN 블로그에 올라온 jQuery Mobile 강좌 http://j.mp/fBJuPs , MS 블로그에 모바일웹기술, 그것도 크롬 브라우저를 활용한 강의가 올라온 것이 이채롭습니다. jQuery Mobile 에 관련해서는 KTH 기술연구소 웹 플랫폼랩 장동수 ( @iolothebard ) /김민태 ( @ibare ) 두분 차장님이 이 글 쓴 친구보다 훨씬 더 잘 알고 계시니 편하게 물어보시면 됩니다. 두분 다 jQueryMobile 에 관련해서는 외부 강의를 뛸 수준의 실력자들 이십니다 ;)


폼 기반 웹사이트 인증에 관한 완벽 가이드 로그인 정보 기억하기/패스워드 암호화해서 저장하기 등.. 여러가지 이슈를 하나하나 설명한 스택오버플로우의 좋은 질문 답변 포스트 // http://stackoverflow.com/questions/549/the-definitive-guide-to-forms-based-website-authentication


링크드인의 새 아이폰앱은 HTML5를 이용한 하이브리드 방식 모바일서버쪽은 전체 Node.JS로 구성. 모바일웹/iOS/안드로이드 가 소스를 공유. 멋진 하이브리드사례가 하나 더 나왔군요 // http://venturebeat.com/2011/08/16/linkedin-node/


CodeAcademy -- 온라인으로 코딩하며 자바스크립트 프로그래밍 배우기. 아직 초급강좌만 있지만 내용이 많아지면 쓸만할 듯 // http://www.codecademy.com/#!/exercises/0


WebAPI -- 모질라가 만드는 Device API. 댓글에서도 말이 많은데.. API만 봐서는 이게 W3C DAP 이랑 WAC 이랑 뭐가 다른건지 잘 모르겠군요 // http://hacks.mozilla.org/2011/08/introducing-webapi/


jQuery Scroll Path 마우스 또는 키보드로 스크롤할때 커스텀 경로를 지정해서 스크롤할수 있게 해주는 플러그인. 데모 필감. // http://joelb.me/scrollpath/


Codiqa -- jQueryMobile 을 이용한 Rapid Prototyping 툴. 드래그앤 드랍으로 후다닥 모바일웹앱 UI를 구성가능// http://codiqa.com/


Javascript Pattern Collection 여기저기서 공유되었던 다양한 JS 패턴들을 한자리에 모은 페이지 // http://shichuan.github.com/javascript-patterns/


Java로 만들어진 RESTful 웹서비스를 Node.js 로 포팅한 이야기 벤치마크부분이 재미있네요. 리소스 사용은 확실히 node 쪽이 적은듯 // http://www.ziggytech.net/technology/web-development/experiences-with-node-js-porting-a-restful-service-written-in-java/


내 앱이 죽었어요, 어떡해야 하죠 ? iOS 개발자들을 위한 버그잡기 팁들을 순차적으로 깔끔하게 정리. 파트1이니 후속편도 기대됩니다 // http://www.raywenderlich.com/10209/my-app-crashed-now-what-part-1


URI.js -- URL을 jQuery처럼 핸들링하는 자바스크립트 라이브러리 // http://medialize.github.com/URI.js/


Backbone.js 를 이용해 싱글 페이지 웹앱 만들기 API가 잘 갖춰진 서비스라면 고려해볼만한 시도 // http://blog.sendhub.com/post/19349219519/single-page-web-apps-with-backbone-js


HTML5 기반 웹 슬라이드 제작 툴킷 모음 22종이나 되는군요. 누군가 비교표를 만들어주길 기다려야 할듯 // http://www.impressivewebs.com/html-slidedeck-toolkits/


Hacker News 모바일웹앱 개발기 http://t.co/t9n0zC2q 아이폰 네이티브앱과 거의 같은 느낌을 주기위해 프레임웍을 사용하지 않고 직접 개발한 내용들을 잘 정리했네요. 모바일웹앱 만드시는분들 필독


iOS 앱의 퍼포먼스 향상 팁 by Pulse 팀 http://t.co/rwgDqTOQ 이미지압축/NOOperationQueues 와 GCD활용/불필요한 이미지 캐슁 하지 않기


SQL.js -- C소스인 SQLite를 Emscripten을 이용하여 JS로 컴파일한 라이브러리. 이제 정말 혹시나 차후에 WebSQL 지원이 끊긴다고 해도, 현재의 소스를 그대로 활용할 방안이 생긴걸까요? ㅎㅎ 재미난 세상입니다. // http://cheeaun.com/blog/2012/03/how-i-built-hacker-news-mobile-web-app


Morris.js -- 타임시리즈 그래프를 쉽게 그리기 위한 경량 JS라이브러리. jQuery & Raphae"l 사용. 모바일도 잘 지원해서 통계툴 만들때 좋겠군요 // http://oesmith.github.com/morris.js/


NameBench -- 인터넷 접속환경에 따라 가장 빠른 DNS서버를 찾아주는 벤치마크툴. 약 4500개의 서버를 테스트. 구글의 20% 프로젝트를 통해 시작되었다고.. // http://code.google.com/p/namebench/


웹&모바일용 UI Kit 모음 Get Your Kits: Fresh Web and Mobile UI Kits, Wireframe Kits and PSD’s  Get Your Kits: Fresh Web and Mobile UI Kits, Wireframe Kits and PSD’s Page 2 // http://www.noupe.com/design/get-your-kits-fresh-web-and-mobile-ui-kits-wireframe-kits-and-psds.html // http://mgmt.noupe.com/get-your-kits-fresh-web-and-mobile-ui-kits-wireframe-kits-and-psds-page-2


Effective Scala -- 트위터가 공개한 Scala 개발가이드 ( Best Practices 모음 ) 스칼라는 트위터의 메인개발 언어중 하나입니다. 한국어로 정리된 Scala 시작가이드 도 참고하세요. // http://twitter.github.com/effectivescala/ // http://ppassa.wordpress.com/2012/02/19/getting_started_scala/


웹개발자와 관리자를 위한 캐슁 튜토리얼 -- HTTP 상의 헤더/메타태그를 이용한 캐쉬방법들을 총 정리한 문서. // http://www.mnot.net/cache_docs/


자바스크립트 메타 프로그래밍 고차원 프로그래밍인 메타프로그래밍에 대해서 예제들을 통해 설명해드립니다. // http://dev.paran.com/2012/02/16/javascript-meta-programming/


turn.js -- HTML5 로 만든 책넘김효과. iBooks의 그 책넘김효과를 자바스크립트로 만든 라이브러리. 스마트폰/태블릿에서도 꽤 부드럽게 실행됩니다 // http://turnjs.com/


Weave -- 누구나, 어떤 데이터라도 쉽게 시각화를 할수있는 것을 목표로 하는 웹기반의 Analysis & Visualization 플랫폼. 오픈소스(GPL/MPL) // http://www.oicweave.org/


Flotr2 -- HTML5 를 이용한 차트/그래프 라이브러리. Prototype에 의존성을 가진 Flotr에서 의존성을 제거하고 향상시킨 오픈소스. // http://humblesoftware.com/flotr2/


mitmproxy -- Path의 주소록업로딩 이슈를 발견하는데 사용되어 유명해진 SSL지원 가능한 man-in-the-middle HTTP Proxy. 모바일패킷 분석용으로 딱 // http://mitmproxy.org/


Ice -- 뉴욕타임스가 공개한 Integrated Content Editor 자바스크립트 라이브러리. 여러 사용자가 추가/삭제한 내용에 대해 트랙킹/하이라이팅 가능. 뉴스룸에서 파일롯 사용중이라고.. // https://github.com/NYTimes/ice/


Open-Advice 무료e북 공개. 총 308p “FOSS : 우리가 시작했을때부터 알았으면 좋았을 것들” 다양한 자유 소프트웨어 프로젝트의 멤버들이 공유한 42개의 이야기와 레슨들 // http://open-advice.org/


조직내에 새로운 프로그래밍 언어를 소개하면서 배운 교훈들 Lessons Learned while Introducing a New Programming Language 새 언어를 도입하려고 하는 회사가 있다면 읽어보면 좋을듯. 여기서는 Java 기반의 회사에서 Clojure를 도입했네요 // http://blog.jayfields.com/2012/01/lessons-learned-while-introducing-new.html


Raphae"l JS 로 만든 벡터 아이콘 182종 확대해도 보기좋고, 각종 효과를 주기에도 좋군요. MIT 라이선스 // http://raphaeljs.com/icons/


모든 워드프레스 사이트에 써야할 필수 Snippet 7종 // http://wp-snippets.com/articles/7-code-snippets-you-should-use-on-every-site/


현재 프로그래머블웹에 등록된 스토리지 API 가 총 76가지 레드오션이라고 볼수도 있고, 어떤 포지셔닝이냐에 따라 블루오션을 찾을수도 있을것 // http://blog.programmableweb.com/2012/01/31/76-storage-apis-box-net-amazon-s3-dropbox/


Android Strict Mode 활용 가이드 안드로이드 개발시 Strict Mode는 옵션이 아닌 필수사항입니다. 앱의 성능개선을 위해 꼭 사용해보세요! // http://dev.paran.com/2012/01/31/android-strict-mode-howto/


The Edge of HTML5 HTML5 관련 최신 기술변경사항들을 정리한 슬라이드. 올해 1월까지의 사항들이네요. //

http://html5-demos.appspot.com/static/html5-therealbleedingedge/template/index.html#1


What’s New in HTML5 Media HTML5 미디어 관련 기술 최신정리 슬라이드. Media Capture / Web RTC / Web Audio API // http://kinlan-presentations.appspot.com/sfmediahtml/template/index.html#1


자바스크립트 어플리케이션 스케일링하기 세개의 비디오 세션. “중소규모 앱을 위한 아키텍쳐/모듈라코드 작성하기/대규모 개발을 위한 패턴들”// http://addyosmani.com/scalable-javascript-videos/


ShareJS -- 전 구글웨이브 엔지니어가 만든 실시간 멀티유저 협업 편집가능한 서버와 라이브러리. 라이브위키등 사용처가 정말 많을 듯 합니다. // http://sharejs.org/


자바스크립트에서 읽을수 있는 각종 파일 포맷 용 라이브러리 링크 모음  PNG/JPG/GIF/BMP/SVG/WebP/Flash/PDF/HTML/Audio/MP3/Java/PSD/Zip // https://github.com/bebraw/jswiki/wiki/File-Formats


Welcome to the Jungle 무어의 법칙은 끝났다! 하드웨어 발전방향을 빼곡히 짚은 초 강추 포스트. 또한 이와 연결해서 지금 소프트웨어 개발자들은 어떤 것에 주목해야 하는가 부분을 꼭 읽어두세요. // http://herbsutter.com/welcome-to-the-jungle/


JSDev -- 더글라스 크록포드옹이 개발하신 자바스크립트 개발용 도구. 실제 코드에 영향 없도록 코멘트에 넣은것을 실행가능한 형태로 바꿔주는 프리프로세싱 방식 // https://plus.google.com/118095276221607585885/posts/CTZ7BNx7a8z


Resumable.js -- HTML5 파일 API와 자바스크립트로 구현된 안정적이고 끊어졌다가도 이어서 전송 가능한 다중 파일 업로드 라이브러리. FF 4+ 와 크롬 11+ 에서 사용가능 // https://github.com/23/resumable.js


Client-Side 템플릿엔진 18종 비교 15항목 비교로 최종4개 구글클로저/Mustache/Handlebars/dust.js 를 뽑고 링크드인이 자신들 엔진으로 선정한건 dust.js // http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more


http://html5please.us/ -- 현재 HTML5 의 특정 기능들을 써야할지, 말아야 할지, 사용하되 조심해야 할지, Polyfill 로 써야할지를 알려주는 사이트. 깔끔하군요


자바스크립트 MVC 프레임워크 탑10 리뷰 UI 바인딩/뷰 조합/웹 프리젠테이션 레이어/호환성 등 4개주요 피쳐로 비교하여 장단점 정리. 이 친구의 최종선택은 Ember.js // http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/


The Power Of Open 개방과 공유가 가지는 힘에 대한 이야기들. 많은 분들이 한글화에 참여해 주셨네요. PDF로 다운로드 가능합니다. // http://tpookorea.tistory.com/category/DOWNLOADS


Funf -- MIT가 공개한 안드로이드용 오픈소스 센싱 프레임웍. 모바일기기의 모든 센서정보(30+개의 Probe들)를 계속적으로 저장해서 트래킹&분석 가능 // http://funf.media.mit.edu/


Share에 대해 한번 정리해 봅시다 + 여담 게이오대 법학부 4학년 @d_ringo 님의 슬라이드를 @5wlim 님이 깔끔하게 번역정리! 공유(Share)에 대한 멋진 자료. 공유에 대한 개념을 알고, 실제 어떤 서비스들로 형상화 되는지까지 알아볼 수 있는 자료입니다. // http://sangwooklim.blogspot.com/2012/01/share.html


Sencha의 HTML5 위시리스트 2012 HTML Media구현 / HTML5 audio 품질향상 / 향상된 오프라인 캐슁 / Web Intents / Web GL / IndexedDB / 기기별 적절한 이미지 사이징 / Contacts API / 백그라운드서비스 / 향상된 모바일 브라우저 디버깅. http://www.sencha.com/blog/sencha-the-2012-html5-wishlist


directCanvas -- AppMobi의 HTML5 가속 SDK. iOS지원,안드로이드도 나올예정. HTML5 게임을 위해 캔바스 가속 및 멀티채널 사운드를 지원. 거의 10배정도의 속도라고 // http://www.appmobi.com/?q=node/226


#2011결산 -- 게임의 흐름을 바꾼 20개의 HTML5 사이트들 웹 개발자 분들께서는 꼭 보셔야 할 사이트들 // http://www.netmagazine.com/features/2011-review-20-html5-sites-changed-game


24시간만에 자바스크립트만으로 VNC 클라이언트 짜기 Node.js , Socket.io , HTML5 Canvas 조합. 오픈소스. 링크드인 인턴이 핵데이때 개발 // http://engineering.linkedin.com/javascript/vncjs-how-build-javascript-vnc-client-24-hour-hackday


Server-Side Javascript Injection (PDF) SQL인젝션과 비슷하게 NoSQL 과 Node.JS를 공격하는 방법과 이에 대한 방어법에 대한 글 // t.co/35TrYAPy

저작자표시 비영리 변경금지

+ Recent posts

티스토리툴바