kipid's blog

# Learning Play Framework Play도 요즘 주목받는 server-side 언어인듯? 2009년쯤에 만들어졌고 Scala, Java 언어로 짤 수 있고... 좀 공부해봐야 알듯. Vert.x랑 비교해서 어떤게 좋을라나? 국내에는 Play 관련 포스팅이 거의 없는듯도. ## PH 2014-07-29: First posting. ## TOC ## RRA Official Play Framework.com/ Related posts iam1492.tistory.com - Play framework으로 블로그 개발하기 (1) - Starting up the project, 2012-03-02 // 설명 글. 6개의 포스팅이 있음. Outsider's Dev Story - Play framewor..

# Vert.x 로 https (SSL/TLS) server 만들기 Vertx 로 secure server 인 https (SSL/TLS) server 를 만들어 봅시다. ## TOC ## keytool .jks 우선 RSA key 를 만들어 줘야 하는데... 명령어는 다음과 같다. 윈도우 cmd 에서 다음과 같은 명령어를 입력하자. ```[.linenums] C:\Recoeve> keytool -genkeypair -alias recoeve.net -keyalg RSA -keysize 2048 -keystore recoeve.jks -validity 3650 // 실행하면 다음과 같이 뜸. Enter keystore password: Re-enter new password: What is your fi..

# Netflix iframe 으로 퍼오기. Netflix 도 유튜브처럼 iframe 으로 퍼오는게 가능한지 테스트. ```[.lang-html] ```/ iframe 설정 X-Frame-Options set to deny 때문에 안되는듯?

# 실시간 HTTP 양방향 통신 (Web socket, Polling, Long-polling, and so on) 웹 페이지가 한번 로딩 된 이후에 서버에 새로운 데이터가 들어오거나 기존 데이터에 변화가 일어나서 이미 로딩이 끝난 사용자의 웹페이지에도 무언가 변화를 일으키고 싶을때도 있을텐데 이런걸 가능하게 해주는 방법에 대해 알아보자. "웹 페이지가 다시 로드되지 않고도 실시간으로 변동사항을 반영해 변화하게 하려면 어떻게 해야할까요. 이런 고민들은 의외로 많은 곳에서 만나게 됩니다. 웹에서 실시간 모니터링 도구를 만들어야 한다던가, 스포츠 실황중계처럼 매우 짧은 시간간격으로 변화하는 상황을 사용자에게 보여주어야만 하는 서비스를 만든다던가 할 때, 우리는 이와 같은 고민에 빠지게 됩니다. 함께 접속한 ..

# Specific event handler on HTML element? How to check whether a specific event handler is bound/asigned to a HTML element or not. (Testing jQuery on/off/trigger) jQuery on/off/trigger 명령어 사용하면서 "이미 element 에 handler 가 붙어있는지 아닌지 어떻게 알아낼 수 있지?" 등이 궁금해서 정리하는 글. ## TOC ## jQuery on/off/trigger HTML element 의 event handler 를 다루는 방법 중 jQuery 의 on/off/trigger 사용하는게 가장 깔끔한 방법이라고 생각. 코드도 이해하기 쉽게 디자인 되어있..

# Number and Bit operations in JAVA and Javascript JAVA 에는 unsinged number type 이 따로 없는듯 하고. Javascript 에서는 data type 자체가 없음. Javascript 는 이런 data type 을 알아서 대부분 처리해주기 때문에 편한면이 많긴한데, 실제 operator (+, -, *, /, and bit operations) 들이 어떻게 구체적으로 동작하는지를 알아내기가 힘들다는 점도 있는듯. ## TOC ## string.charCodeAt(index) and String.fromCharCode(int) in Javascript JAVA 에서는 str.codePointAt(int i) and String.valueOf(in..

Font Test in HTML HTML에서 여러가지 Font testing. Table of Contents Which font-size is the best among "px", "mm", "pt", "em", "%" 아래 div를 감싸고 있는 parent div의 font-size를 10px로 해놨음. (style="font:10px/1.6 '맑은 고딕'") 굳이 10px로 정한 이유는 child div들(+다른 child tag들)의 font-size를 em(혹은 %)로 표시할거라서 계산 상 편의를 위함임. 보통 em을 쓰는 것이 권장되는 방법이라고 함. 즉 font-size를 정할 때 (px, cm/mm, pt)보다 %나 em을 쓸 것을 더 권장함. Parent의 font-size 기준으로 일관..

# HTML 가로 Slide 구현하기 다음이나 네이버 메인 페이지의 가로 slide 들이랑, 사진 가로 slide 들을 어떻게 구현할 수 있는지 궁금해서 알아보는 중. 똑똑하게 scroll 동작을 인식해서 가로 slide 를 바꿔주는게 필요한듯. CSS 를 어떻게 해줘야 하는지가 조금 헷갈리고... ## TOC ## 사진 가로 slide ## rolling, flexible, counter content 1 content 2 content 3 content 4 prev next current : 2, total : 4 ## limit, page:2, speed:300 content 1 content 2 content 3 content 4 prev next ## multiple, view:3, limit ..

# HTML event handler HTML event handler. Javascript/jQuery 로 HTML 에서 일어나는 여러가지 event 들을 처리해서 interactive 한 페이지를 만들 수 있음. 그런데 헷갈리는 것들이 많고, 어떤 event 들이 있는지도 다 기억하기 힘들어서 정리하는 중. ## PH 2016-02-01 : Smart phone touch event 관련 정리. 2015-12-10 : 조금 더 정리. 2014? : First posting. ## TOC ## Mouse and Touch event ### On click event (getting event position) ```[#mouse-event-result.scrollable] mouse-event-resu..

Javascript namespace or encapsulation C, C#, C++, JAVA 등 에서의 "namespace, private variable, private method" 같은 효과들을 javascript에서 어떻게 비슷하게나마 구현할 수 있는지에 관한 이야기. (자세한 정리는 에서 보시길. 제대로 정리하기가 귀찮아서 -ㅇ-;;; 하더라도 천천히 나중에나 할듯.) (예전에 공부하면서 그냥 대충만 정리해 놓은것들이라;;; 여기선 정말 대충, 엉터리로 정리해놨으니 reference들 참고해서 공부하세요.) Closure란 특성을 이용하는 것인데... Garbage collection과도 관련이 있고... Closure란 단어가 너무 추상적인듯도... closure 특성이라고 많이들 이야기..

# 반응형 웹 만들기 (Responsible/Scalable web design with css media query) 기본적으로 어느 인터넷 브라우저에서든 Ctrl+mouse wheel 을 하면 scale 을 바꿀 수 있음. Chrome 은 site 별로 이 scale 도 저장해놔서 나중에 왔을때도 같은 scale 로 web-page 를 볼 수 있음. 개인적으로 국내 web page 들 90% 이상에서 글씨 크기가 눈나쁜 나한테는 너무 작아서... 항상 scale up 해서 보는 경향이... Chrome 기본 설정에서도 기본 글씨 크기를 바꿀 수 있긴 한듯. 그런데 어차피 사이트 제작자가 그냥 font 에서 layout 을 맞춰놓은 경우가 많아서.. 이걸 바꾸면 overflow 나고 이럴 경우도 많을듯..

티스토리 단축키 설정 (+단축키 추가/수정하기) 티스토리에 단축키가 있다는걸 최근에야 깨달음;;; 티스토리 단축키 설명은 sidebar에도 표시해 놨음. Posting History 2014-06-20: First Posting. Table of Contents 티스토리 기본 단축키 티스토리 기본 단축키 Q: 관리자 (Admin) A: 이전 글 S: 다음 글 Z: 최근에 올라온 글 X: 최근에 달린 댓글 C: 최근에 받은 트랙백 개인적으로 추가한 단축키 D: Previous Section F: Forward Section L: To the [Lists] 글쓰기에 들어가면 에디터에도 단축키들이 많은것 같지만, 난 HTML로 쓰는 경우가 많아서 이것 관련 정리는 패스. 단축키 추가/수정하기 단축키를 추가하거..

Customized styling of scroll bars in HTML First posting at 2014-05-26 Cross browsing 문제가 심하긴 한듯. Table of Contents in Webkit browser (Chrome, Safari, Opera) 설정들은 참조해서... ▲ default scrollbars. ::-webkit-scrollbar{ /* 1 */ } ::-webkit-scrollbar-button{ /* 2 */ } ::-webkit-scrollbar-track{ /* 3 */ } ::-webkit-scrollbar-track-piece{ /* 4 */ } ::-webkit-scrollbar-thumb{ /* 5 */ } ::-webkit-scrollbar-..

Improving web performance 그냥 구글에 "improving web performance" 검색하면 여러가지 잘 정리해놓은 페이지들이 나오는듯. References and Related Articles Six Revisions - 10 Ways to Improve Your Web Page Performance, 2008-12-22, by Jacob Gube.; 꽤나 잘 정리되어 있는듯. pamela fox's blog - Improving front page performance: removing images, 5 ways, 2014-01-30.; TinyPNG로 이미지 용량줄이기, Delay load로 scroll 되기 전의 load 줄이기. tutsplus - Best Practic..

Citing the references automatically in HTML (like LaTeX) I cite the first ref . And citing the second , I cite finally the third one . There could be more than one cite in the article . You can check those references. web:, ref2:. kipids:, no:, unknown:. Bubble reference which is cited manually: [01] Ref. [01] This is a manual reference. So this is not listed below in Reference section. On mouse..

LaTeX(라텍스, 레이텍) 소개 및 설명서(Guide)들 LaTeX가 장단점이 있긴한데... 내가 볼땐 단점이 훨씬 더 많은거 같음. 이제는 점점 인터넷 기반 문서 편집기(word)가 대세가 될거 같은데.. 그 후보군중 가장 유력한 것이 LaTeX 같긴 함. 하지만 접근성을 높이려면 많은 수정이 필요할 듯. HTML(인터넷)과의 연계를 높이는 word(문서 편집기)가 최종적으로 살아남을 것이라고 봄. HTML5가 곧 그 역활을 할지도? HTML을 고치느냐, LaTeX, MS Word, 한글 등을 고치느냐의 싸움인데... 둘 다 적절히 고쳐서 연계시켜 나갈듯??? Mark-up language랑 WYSIWYG(What you see is what you get)랑 잘 섞여들어가야 할거 같은데, 왜 아무도..

CSS3 examples css animation으로 구글 검색하면 많은 example들을 찾을 수 있음. 3D는 무거워서 css3 animation 쓰는게 그닥 좋아보이지는 않음. 그래도... 음....... transition 이런건 좋은듯? http://www.carnationgroup.com/ 이 사이트처럼? References and Related Articles w3schools - css3 animations webdesignerwall.com - 47 Amazing CSS3 Animation Demos (놀라운 CSS3 애니메이션 데모 47개), 2010-02-03 Webstoryboy's blog - 플래시를 능가하는 HTML5/CSS3 16가지 사이트, 2012-06-12

# 괜찮은 에디터들 소개 및 추천 (Introducing/Recommending good code editors) 간단한 소개만 작성. ## PH 2015-12-14 : To SEE. 내용 더 추가 및 정리. 2014-06-24 : First posting. (더 전에 작성한거 같기도 한데, 대충 이 근처일거임. Atom 나왔다는 소식듣고 바로 작성했나? 그 이전에 sublime text 써보고 너무 괜찮았어서 작성했나?) ## TOC ## Sublime Text 구글 출신 개발자가 만든 멋있는 에디터 . (이거 제대로 만들려고 구글은 퇴사한듯 함. 2008년에 version 1 이 나온듯? Jon Skinner left his job as a software engineer at Google in or..

Delayed (Lazy) Loading in HTML by JavaScript (+jQuery) This is sometimes called 'Lazy Loading'. Maths, i.e. equations, are also delayed-rendered by MathJax . (Some of this document are written in Korean (called Hangul). People who do not know Hangul, just read english part. That will be enough.) 사용자가 안보고 넘길것 같은 부분은 굳이 미리 로딩해놓지 말고, 속도를 빠르게, 서버 부담을 적게 덜어주자는 목적으로 Delayed Loading이라는 개념이 있음. 특히나 용량이 ..

# Cloud Server Services (eg. Amazon Web Services) 작성중인 글. 서버 컴퓨터를 사서 웹 서비스를 할수도 있겠지만, 서비스 초반에 서버용 컴퓨터를 사려면 초기비용 및 이것저것 관리비가 많이들테고... Scalable 문제도 많아서 Cloud Server Service 를 이용해 보는것이 좋아보임. (뭐 꽤나 성장을 한다면야 따로 구축해 놓는게 위기/보안관리나 비용면에서 더 절약될지도... 더 할일은 많겠지만.) ## TOC ## Amazon Web Services - EC2 (Elastic Compute Cloud) 어떤 다른 기업의 서비스들이 있는지 잘 모르겠지만, 우선 가장 유명한건 AWS 인듯? 사이트 자체를 엄청 깔끔하게 만들어놔서 더 믿음직스럽기도... (요..

# HTTP Server-side Frameworks/Languages 뭘 써야할까? HTTP 서버를 어떤 frameworks 및 어떤 언어로 돌릴지도 꽤 중요한 문제일거라서 정리를 좀 해보려고 함. 그런데 정확한 용어를 모르겠네. Sever framework? Server platform? Server-side language? Server API (Application Programming Interface)? 내가 여기 정리한 것들을 정확히 뭐라고 지칭하는거지??? 그냥 일반적인 programming 언어들 관련해서는 에 정리. ## TOC ## Simple (but bad performance?) frameworks 누구나 간단하게 서버를 돌릴 수 있게 만들어진 framework 들이 많은데, 간..

# CSS Specificity or Priority (우선순위) CSS 우선순위가 약간 헷갈리는 것들이 있어서 정리중. 우선 링크들만 정리. CSS Selector, inline style, !important, javascript handling. Javascript 로 style 바꿀때도 CSS selector 처럼 영향이 있는건가? 아니면 이땐 항상 inline style 로 적용되는건가? 당연히 후자라고 생각했었는데, 테스트 해보니까 전자 같기도... 추가로 실제 브라우저에서 어떻게 구현을 해놨는지도 궁금한데... 분명 CSS 처리를 먼저 해놓고, HTML element 들을 처리하면서 바로 CSS 를 적용시키는 식으로 페이지를 띄우던데... 저장된 CSS 를 모두 거치면서 selector 에 ..

# Youtube Download 유투브 영상을 다운받는 여러 방법들이 있는거 같은데, 난 을 이용해서 다운받았음. 뭔가 유투브 영상 다운받을 수 있다는 것을 미끼로 바이러스를 심거나 하는 사이트들이 꽤 있는것도 같음;;; 이런 사이트들 경유하지 않아도 뭔가 동영상 파일을 브라우저에서 바로 뽑아낼수도 있을것도 같긴한데... 모르겄당. ## RRA www.clipconverter.cc

# Learning AngularJS AngularJS 라고 JavaScript 를 확장해서 쓰는 framework 가 있다고 한다 . jQuery 랑 비슷한 놈이라고 생각해도 되는데, jQuery 가 HTML DOM (Document Object Model) 기반으로 selector 및 chainning 을 구현해 놓은 것이라면, AngularJS 는 MVC (Model–View–Controller) 기반으로 동적인 페이지 (Dynamic page) 를 쉽게 만들기 위한 목적으로 만들어진 감이 크다고 생각된다. 뭐 개인적으론 당장 동적인 페이지를 필요로하지 않아서, 배울 필요성을 당장 느끼지는 못하는데... 멋진 dynamical HTML page 를 만들고 싶다면 꼭 배워둬야만 하는 framework..