윤Front-End2012. 3. 27. 15:55


캬.. 몇년전이지..;; 2009년 12월 부터 2010년 1월까지 한달 보름정도 미친듯이 열심히 해서 만든 녀석.

메쉬업에서 상 받아서 봄싹에 서버 마련해보자고 했지만.. but good try... 

요즘 잘 나가시는 아대장님

요즘 무림속에서 조용히 지내시는 고수 아롱님

요즘 형수님과 참기름 만든다고 고생하시는 미라클님

요즘 미쿡에서 삽질하는 나!

이렇게 4명이서 열심히 만든녀석.


아마 이녀석 만들면서 JS사랑에 빠졌지;; 그리고 이녀석때문에 방황하다.. 미쿡에 왔지?;;

그냥 급생각나서..ㅎㅎ

언제 나중에 서버 호스팅할 공간이라도 생기면 다시 세팅해봐야겠다.


지금 코드보면 악취이빠이지만..ㅎㅎ 그땐 시간과의 싸움으로 인해;; 

암튼 기다려라! 내가 살려줄께:-)

Java / Extjs / jQuery / springframework / oracle10xe 

코드?ㅋ


Posted by is윤군

댓글을 달아 주세요

  1. 지금봐도 참 훌륭하다는 생각이 드네. 이런건 정말이지 '미치지 않았으면 불가능'한 계열의 작업물이라 생각하기 때문임. 크~

    2012.04.14 21:39 신고 [ ADDR : EDIT/ DEL : REPLY ]

윤Front-End2012. 1. 25. 12:42
요즘 js가 좀 뜨는 언어이긴 한데.. 그중에 요즘 뭐 모듈화 한다고 거시기 하는데..
좀 하다보면 별건 아니지만.. 정말사소한거 하나 이야기 해볼까 한다.. 
이 코드에서 신경쓰이는 것은 다름아닌.. fn2 즉 .. Somefn 모듈내의 function에서 같은 모듈내의 function 을 호출 하려면.. 
namespace를 통해서 호출해야 한다.
비록 지금 저 녀석 이름이 짧아서 그러지면..
뎁스가 깊어진다면..
xxx.yyy.zzz.fn1 이런식으로 계속 적어야 하고 귀찮기가 이만 저만이 아니다.. 
뭐 이문제야 짧게 a라고 이름지으면 피할수 있는 문제이고.. 
이 namespace가 변경된다면 모듈내에서도 namespace를 바꿔줘야 한다. 

그래서 그냥.. 


  이런식으로 내부에선 특정 변수로 받아서 호출해준다면.. namespace가 길어져도..
namespace가 변경된다고 해도... 모듈 내에선.. 딱히 변경할 필요가 없어지고..
편할 수도 있다.. !! 근데 사실 이건.. 그냥 눈에 보이는 그냥 무시해도 되는 문제고..

두가지 방식에는 결정적인 다른점이 있다!!!!!!
그게 멀까나?!!
Posted by is윤군
TAG JS, 모듈?

댓글을 달아 주세요

  1. 뭔데?

    2012.03.14 16:46 [ ADDR : EDIT/ DEL : REPLY ]

윤Front-End2011. 9. 29. 10:42

    
String.prototype.escapeHTML = function(){
  return $('<pre>').text(this.toString()).remove().html();
};

Posted by is윤군

댓글을 달아 주세요

윤Front-End2011. 8. 23. 12:46
기본 jQuery animate로는 backgroundcolor 효과를 줄 수 없다.
그래서 보면 jQuery ui plugin에 보면 모듈로 들어가 있는데.. 

이것저것 플러그인 붙이는게 싫은 사람들이 있고.. 가끔 저런 기능은 써쭤야 하고 그러면..
머 별건 아니지만.. 그부분만 가지고 와서.. 좀 min버전으로 만들어서 쓰면 되지 않을까 싶다.

뭐 남이 열심히 만들어 놓은걸 마음대로 편집해서 쓰고 싶은 맘은 없지만;; 특정부분만 쓰고 싶기에..
그리고 http://jquery.org/license/ 라이센스도 꽤나 자유로운 편이라;; 

무튼.. 그래서.. 난.. 


 /*
   * jQuery UI Effects 1.8.16
   *
   * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
   * Dual licensed under the MIT or GPL Version 2 licenses.
   * http://jquery.org/license
   *
   * http://docs.jquery.com/UI/Effects/
   */
  //override the animation for color styles
  $.each(['backgroundColor'],
  function(i, attr) {
    $.fx.step[attr] = function(fx) {
      if (!fx.colorInit) {
        fx.start = getColor(fx.elem, attr);
        fx.end = getRGB(fx.end);
        fx.colorInit = true;
      }

      fx.elem.style[attr] = 'rgb(' +
        Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0], 10), 255), 0) + ',' +
        Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1], 10), 255), 0) + ',' +
        Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2], 10), 255), 0) + ')';
    };
  });

  // Color Conversion functions from highlightFade
  // By Blair Mitchelmore
  // http://jquery.offput.ca/highlightFade/

  // Parse strings looking for color tuples [255,255,255]
  function getRGB(color) {
      var result;

      // Check if we're already dealing with an array of colors
      if ( color && color.constructor == Array && color.length == 3 )
          return color;

      // Look for rgb(num,num,num)
      if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
          return [parseInt(result[1],10), parseInt(result[2],10), parseInt(result[3],10)];

      // Look for rgb(num%,num%,num%)
      if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
          return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];

      // Look for #a0b1c2
      if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
          return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];

      // Look for #fff
      if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
          return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];

      // Look for rgba(0, 0, 0, 0) == transparent in Safari 3
      if (result = /rgba\(0, 0, 0, 0\)/.exec(color))
          return [255,255,255];

      // Otherwise, we're most likely dealing with a named color
      return [255,255,255];
  }

  function getColor(elem, attr) {
      var color;
      do {
          color = $.curCSS(elem, attr);

          // Keep going until we find an element that has color, or we hit the body
          if ( color != '' && color != 'transparent' || $.nodeName(elem, "body") )
              break;

          attr = "backgroundColor";
      } while ( elem = elem.parentNode );

      return getRGB(color);
  };

colors부분은 그냥 지워버렸다;; 난 색상코드를 그대로 사용할꺼니까..
무튼 이렇게 해서 최대한 적은량으로 이펙트를.. ;;;
Posted by is윤군

댓글을 달아 주세요

  1. 와우, 좋아요.. ~.~

    2011.08.26 08:48 신고 [ ADDR : EDIT/ DEL : REPLY ]

윤Front-End2011. 7. 8. 15:21

The replaceState() method

history.replaceState() operates exactly like history.pushState() except that replaceState() modifies the current history entry instead of creating a new one.

replaceState() is particularly useful when you want to update the state object or URL of the current history entry in response to some user action.



history.replaceState()은 새로운 녀석을 하나 만드는 대신 히스토리 엔트리를 변경하는 것을 제외 하고는 history.pushState() 녀석과 완전 같음.

replaceState()는  state object나  같은 유저엑션의 현재 히스토리 엔트리의 URL 업데이트를 원할 때
특히 유용하다. 


원문 :https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#section_7
 

Posted by is윤군

댓글을 달아 주세요

윤Front-End2011. 6. 30. 02:42
웹개발을 하다 보면 썸네일 만들기를 한번쯤은 해본다고 생각한다.

음.. 사실 썸네일을 제작하는건.. 쉽다... 인터넷에 널리고 널린게 썸네일 만들기 소스 일지도 .. 

 
껀수가 장난 아니게 많타..

그런데.. 문제는..
썸네일을 만들었을 때 얼마나 원본 이미지에서 전달하고 싶은 내용을 잘 살리느냐의 문제..

고정크기로 만든다던가.. 특정 비율에 의해서 만들다보면.. crop을 하기 마련인데..
이때.. crop되는 부분을 어디서 짜르냐의 문제이다..

솔직히 가로 사진의 경우는 크게 문제가 되지 않는다..  
왠만하면 가로사진을 찍을때 중요부분을 귀퉁이에 두고 찍지는 않는단 말이지..

그런데.. 세로 사진의 경우는 좀 예매하다..
그녀석이 인물 사진인경우와 아닌경우..
생각해보니 가로 사진의 경우도 문제가 될 순 있겠네..ㅋㅋ

무튼 내가 만들어야 하는건.. 3:4 가로 비율이 중요해서..
세로 사진의 경우 매우.. 애매하다..

원래는.. 원본 이미지의 비율을 구해서.. 특정 공식에 의해서.. 정확하게.. 위 아래를 똑같이 짤랐엇는데..
그러다 보니.. 인물 사진의 경우 .. 80%이상은 얼굴이 짤리고 몸통만 나오게 된다..
이게 물론 유저 썸네일이었다면 좀 큰 문제가 있겠지만..

그냥 아티클의 특정 이미지라서 괜찮을꺼야;; 라고 방치 했었는데.. 흠..
생각해보니.. 완전.. 가운데로 짤랐을때.. 이미지의 정보를 많이 훼손하는 것 같더라.

페이스북의 프로파일 이미지의 경우는 가로 180기준으로 원본 이미지의 비율에 맞추어서 썸네일을 만든다.. (fit하는 것도 제공하긴한다..ㅋ)
보면 crop되는 부분은 하나도 없다.. 대신.. 세로 길이가 동적이다..
프로파일 이미지의 경우 이미지의 정보 훼손없이 굿샷으로 만들 수 있는 것 같다..

뭐 말이 길어졋는데.. 무튼 세로 부분을 짜르는데 있어서.. 정가운데 보단.. 4/1지점 상단으로 땡기는게 좀더 괜찮은 것 같다..
얼굴은 최소한 안짤리니..
 private function calculateSize()
  {
    if($this->oriWidth > $this->oriHeight)
    {
      $this->newHeight    = $this->oriHeight - ($this->oriHeight % $this->height);
      $this->heightOffset = ceil(($this->oriHeight % $this->height) /2);
        
      $this->newWidth = ceil(($this->newHeight * $this->width) / $this->height);
      $this->widthOffset = ceil(($this->oriWidth - $this->newWidth) /2);
    }
    elseif($this->oriHeight > $this->oriWidth)
    {
      $this->newWidth = $this->oriWidth - ($this->oriWidth % $this->width);
      $this->widthOffset = ceil(($this->oriWidth % $this->width) /2);
        
      $this->newHeight    = ceil(($this->newWidth * $this->height) / $this->width);
      $this->heightOffset = ceil(($this->oriHeight - $this->newHeight) /4);
    } 
  }

 원래 다 2로 나누었는데.. 제일 밑에 hightOffset의 경우는 4로 나누었다.. ;;

 

원본 비율
 

정가운데 crop
 

정가운데에서 좀더 위에.. crop.. 

그나마 좀 괜찮아 보인다..;;
그런데 프로파일 이미지의 경우는 상단 기준으로 밑부분을 짤라네는게 좀더.. 괜찮은 것 같기도 하다 .ㅋ  

ps. 사진에 출연한 녀석의 나의 사랑 엑수맨이다..;; 

Posted by is윤군
TAG 끄적..

댓글을 달아 주세요

윤Front-End2011. 6. 20. 16:14
일단 닥치고 코드부터.
var cuckoo = function(howmanyCuckoo){
  if(0 === howmanyCuckoo){
    return false;
  }
  console.log('cuckoo~');
  cuckoo(--howmanyCuckoo);
}
cuckoo(12);
00 시이길래 뻐꾸를 울려볼까 해서 급 제조한 코드;; 
관심있는 여성분에게는 더 많이 날려도 좋을 것 같네요..
Posted by is윤군

댓글을 달아 주세요

윤Front-End2011. 6. 11. 06:28
트윗의 api document 문서를 보면 .. 
oAuth token 을 얻기 위한 url이 두개가 있다..

(각 링크를 누르면 api문서를 볼 수 있뜸!)

사실 둘다의 링크를 이용해도 인증은 할 수가 있다.
그런데 두 녀석의 다른 점이 있다면 ..
하나는 desktop application 에서 반드시 사용해야 하는 녀석이다. 

https://api.twitter.com/oauth/authorize
  이녀석인데.. 
api 문서에 봐도 ..
Desktop applications must use this method (and cannot use oauth/authenticate).  
이렇게 적혀 있다.. 
그런데 웹에서도 사용할 수 있다. 

다만 두녀석의 큰 차이중에 하나는 ..
첫번째 녀석은 인증을 요청 할때마다..

 이렇게 계속 물어본다.. 계속 계속..  
 문서를 좀더 보면 데탑 플로우는 살짝 다르기때문에 이렇게 만들어 놓은 것 같다.  당연한 이야기이지만 말이다 ;; 

흠냥.. 무튼.. 웹에서 트윗 연동을 하고 싶다면 2번을..
데탑용이라면 1번을 사용해야함~;

 
Posted by is윤군

댓글을 달아 주세요

윤Front-End2011. 6. 8. 11:34
요즘 마니들.. html 로 메일을 보낸다. 
그런데... daum 메일에 약간 버기 한거 있어서 @.@

tag id 중에 footer 라는 녀석이 있다면..
daum mail() 에서 내용이 출력 되지 않더라.. (2011.6.7 일 기준!) 

첨에는 .. 잘 못 보냈는 줄 알았는데 다른쪽에도 보내본 결과 잘 나왔고..
혹시나 해서 봣더니..

 
#footer 가 정의 되어 있고.. visibility : hidden 으로 정의 되어 있다.. 
그런데 원래라면 ..  자기내 css들과 유저가 작성한 것과 충돌 나지 않도록 만들어야 하는거 아닌가 모르겠다..
hidden의 문제를 떠나 무튼 footer를 쓴다면 안보이고 이상한 스타일이 먹을 듯..

그리고 다른 테그도 함께 쫑나는거 아닌가 모르겠네;;

그냥 머 뭐 그렇다고~~;;;  짓거려 봄!!
Posted by is윤군

댓글을 달아 주세요

  1. 안녕하세요, 다음 메일 담당자입니다. 우연히 검색을하다 윤군님의 블로그에 들리게 되었습니다.^^; (얹짢아 하지 않으셨으면 좋겠습니다^^;;) 포스팅 해 주신 현상은 즉시 확인하도록 하겠습니다. 이후에도 개선해야 할 부분을 발견하신다면 언제든 말씀주세요!! 감사합니다.^^;;

    2011.06.17 00:56 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 핫;; 괜히 보시고 기분나쁘신거 아니였나 모르겠네요;;;
      뭐 사용하다 보니.. 이상한게 있어서 블로깅 한거구요;;
      다음메일을 욕한건 아니에요.;; 무튼 다음메일은 잘 애용하고 있답니다 ㅋ
      그럼 ~~ 열개발 하세욤~

      2011.06.17 20:33 신고 [ ADDR : EDIT/ DEL ]

윤Front-End2011. 6. 7. 09:08
불여우에 버그.. 

input type="button"  or input type ="reset" or input type ="submit" 으로 만들어진 버튼들에 
line-height를 조절 할 수 없다.

button 이랑 submit 녀석들을 a tag로 만들어진 button 과 함께 스타일 먹여서 사용하고 싶었는데..
파폭에서 이상하게 나와서 찾아보니 ..

역시나 불여우 버그.. ;;

http://www.cssnewbie.com/input-button-line-height-bug/ 
작년에 알려진 버그인데.. 불여우4에서 여전히 수정이 안되어 있네;;  

해결 방안은..
1. 우선 padding으로 처리 한다.
2. button 과 a tag 버튼을 함께 나열 하지 않는다.
3. button이 다른 브라우저랑 사이즈가 살짝 작아도 그냥 견뎌야 함.
4. firefox만을 위해서.. css를 작성한다.. 
body.firefox input.sBtn{
  padding:4px 10px !important;
  line-height: normal !important;
}

body.firefox input.lBtn{
  padding:5px 10px !important;
  line-height: normal !important;
}

body.opera input.sBtn{
  padding:5px 15px !important;
  line-height: normal !important;
}
body.opera input.lBtn{
  padding:6px 15px !important;
  line-height: normal !important;
}



이상!!   사실 opera는 좀 더 멍청했다 ㅡ.ㅡ;
Posted by is윤군

댓글을 달아 주세요