custom 디자인의 select box를 만들려면 아래쪽 방향의 caret이 필요하다. 이미지로 만들어도 되지만 CSS로 간단히 만드는 방법이 있다. border를 이용한 방법인데 아주 신박하다. 각 border가 만나는 지점이 사선으로 처리된다는 것을 이용했다. border-left:4px solid transparent; border-right:4px solid transparent; /* 아래쪽 */ border-top:4px solid #333; /* 위쪽 */ border-bottom:4px solid #333; 이런 식이라면 위, 아래뿐만이 아니라 오른쪽, 왼쪽도 가능하다. 정말 창의적이고 대단한 방법이라는 생각이 들었다. See the Pen Caret by Joo (@joostory) o..

Open Graph는 페이스북이 공유되는 외부 문서들을 효율적으로 관리하기 위해 고안한 프로토콜이다. 처음엔 이나 이미 존재하는 메타태그들로 가능한 걸 왜 이렇게 하나 싶었는데 점점 활용이 늘어나서 동영상, 오디오, 슬라이드 쇼, 음악 등등 별 것을 다 할 수 있게 되었다. 요즘엔 블로그에서도 참조 문서를 넣을 때 og를 사용해서 미리보기같은 모습으로 넣는 것을 지원한다. 브런치, 포스트가 할때만 해도 그냥 하나보다 했는데 네이버 블로그가 해버리니 마치 반드시 필요한 기능같은 것이 되어버렸다. 사람들이 티스토리에는 왜 없냐고 자꾸 물어본다. 별다른 방법이 없어서 미루다가 tinymce에서는 이런 object를 다루기가 쉬워보여서 도전해보았다. 기본 타입 Open Graph protocol The Open..

회사에서 사정상 php를 메인개발언어로 사용하고 있다. 처음엔 익숙하게 사용하던 Apache friends의 XAMPP를 사용했었는데 docker 능력자가 나타나서 모든 것을 docker로 바꿔주었다. 첨엔 어리둥절했지만 사용하면 사용할 수록 docker가 참 좋다. docker허브에 등록된 php docker 같은 것을 사용하면 간단하게 php 웹서버를 돌려볼수도 있다. 물론 옵션을 조정하기 시작하면 직접 docker를 등록하기도 하고 해야하는데 어쨌든 머신이 바뀔때마다 새로 서버환경을 세팅할 필요가 없어서 참 좋다. 에디터에도 많은 변화가 있었다. 특출난 php 에디터가 없어서 sublime text, atom, emacs 같은 에디터를 사용했는데 PHPStorm의 존재를 알았다. 구매해야하긴 하는데..

Tistory Editor는 처음엔 단순히 markdown editor가 있었으면 해서 만들었다가 조금씩 욕심이 생겨 에디터가 무려 3종류나 붙어있는 app이 되었다. markdown하나와 wysiwyg에디터 2개다. 그러고보니 Quill을 붙였을때 앱 버전이 0.2가 되었다. 그리고 Tinymce가 붙어 0.3이 되었다. tinymce는 처음 시작할 때는 문서도 엉망이고 불친절해서 욕도 좀 하곤 했는데 에디터 자체의 구조가 너무 좋아 참고 참아 하나하나 알아가보니 꽤나 괜찮은 결과물이 나온다. Quill은 시작이 아주 쉽고 몇몇 기능은 아주 뛰어나지만 확장성이 그리 좋진 못하고 delta라는 놈이 나의 발목을 잡았다. delta to html 이라는 모듈도 만들어서 해결해보려 노력했지만 완벽히 변환되지..

tinymce의 plugin을 또 하나 만들고 있다. 이전에 codeblock plugin을 만들땐 layer를 직접 만들었는데 이번엔 tinymce의 모듈을 써서 만들어보고 싶었다. 그래서 WindowManager.open의 파라미터를 확인해봤다. 내가 헛것을 보는건 아니겠지라는 생각이 들만큼 단촐한 설명이다. 'width/height/url etc' 이라고? 잠시, 아니 한참을 멍하니 있다가 소스코드를 보기로 했다. WindowManager니까 Window의 생성자 파라미터겠지 라고 생각했는데 그게 맞았다. 근데 단순히 넘겨주는 건 아니고 조금 조작을 한다. 그러니까 Window의 생성자와 다른 값을 파라미터로 받는다. 그럼 문서에 그걸 써줘야하는거 아냐? 부글부글. 조금 짜증이 났지만 아쉬운건 나니..