Subscribe: 아키라토
Added By: Feedage Forager Feedage Grade B rated
Language: Korean
android  api  audio  browser  css  element  https  ios  javascript  navigator useragent  object  safari  style  window     
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: 아키라토



리눅스 서버 특정 포트를 외부에서 접근하지 못하도록 차단하기

Thu, 15 Oct 2015 12:52:44 +0900

현재 열려있는 포트 목록 확인netstat -tnlp 특정 포트가 외부 접근이 가능하게 열려있는지 확인 nc -z localhost 3306 해당 포트를 외부에서 접근하지 못하도록 차단 sudo /sbin/iptables -A INPUT -p tcp --dport 3306 -j DROP References:

CSS.Supports() and polyfill

Fri, 02 Oct 2015 13:20:33 +0900

About…/docs/Web/API/CSS/supports Compatibility Polyfill

Windows 8.1 IE 11 에서 overflow:hidden 이 무시되는 어떤 경우

Tue, 11 Aug 2015 15:00:15 +0900

Windows 8.1 IE 11 에서는 CSS3 transform 을 적용한 엘리먼트가 부모 엘리먼트의 overflow:hidden 을 무시하는 현상이 있다. 이럴 때에는 transform 속성을 적용한 엘리먼트에 opacity: 0.99; 속성을 함께 주면 (이상하지만) 해결된다. IE11 환경에만 이 속성을 적용하고 싶은 경우 아래의 미디어 쿼리를 이용해 CSS 를 설정할 수 있다. @media all and (-ms-high-contrast:none) { *::-ms-backdrop, .target-element-classname { opacity: 0.99; }} .target-element-classname 부분에 해당 엘리먼트 셀렉터를 쓰면 된다. Reference:

JavaScript Performance: Mutiple variables or one object?

Fri, 31 Jul 2015 15:44:20 +0900

Q. Which one is better?var x = 15; var y = 300; vs. var sizes = { x: 15, y: 300 }; A. Old'ish browsers, especially IE6+7 have huge performance penalties when accessing object properties. But nonetheless, we are talking about micro and nanoseconds here (in modern browser implementations). You are definitely micro-optimizing. I wouldn't worry about it until there is a demonstrable performance bottleneck. Welcome to 21th century!

JavaScript 객체의 속성을 제거할 때 delete 연산자보다 undefined 나 null 값으로 만드는 것이 낫다

Mon, 27 Jul 2015 14:52:52 +0900

Operator delete is unexpectedly slow! Delete is the only true way to remove object's properties without any leftovers, but it works ~ 100 times slower, compared to it's "alternative", setting object[key] = undefined. Use setting to undefined, when you care about performance. It can give a serious boost to your code. The key remains on its place in the hashmap, only the value is replaced with undefined. Understand, that loop will still iterate over that key. There is no way to force garbage collection in JavaScript, and you don't really need to. x.y = null; and delete x.y; both eliminat.......

LG Browsers

Wed, 15 Jul 2015 13:10:13 +0900 Chromium 30 458 / 555 - G Pad 8.3 Android 4.4.2 - G Pro 2 Android 4.4.2 - G2 Android 4.4.2 - G2 mini Android 4.4.2 - L65 Android 4.4.2 - L70 Android 4.4.2 - L90 Android 4.4.2 - Optimus G Pro Android 4.4.2 460 / 555 - G Flex Android 4.4.2 - G Pad 7.0 Android 4.4.2 - G Pad 10.1 Android 4.4.2 - G2 mini Android 4.4.2 - Optimus F6 Android 4.4.2 - Optimus G Pro Android 4.4.2 - Optimus L9 II A.......

IE8 이하 투명도(Alpha) 필터가 동작하지 않을때

Wed, 01 Jul 2015 09:18:12 +0900

In Internet Explorer 7, 8, 9, non-static child elements do not inherit the opacity of the parent. IE9: Give the parent a non-static position.IE8: Have the child inherit the filter style.IE7: Have the child inherit the filter style and give the parent a non-static position.

z-index 를 지정하지 않았을 때 엘리먼트는 어떻게 쌓이나

Wed, 01 Jul 2015 09:16:50 +0900

When no element has a z-index, elements are stacked in this order (from bottom to top):1. Background and borders of the root element2. Descendant blocks in the normal flow, in order of appearance (in HTML) 3. Descendant positioned elements, in order of appearance (in HTML)

JavaScript 로 UIWebView 와 WKWebView 를 구분하는 방법

Thu, 25 Jun 2015 18:09:01 +0900 를 구분하는 방법:iOS 웹뷰이면서 window.indexedDB 를 지원하는지 확인 var isInApp = (navigator.userAgent.indexOf('iPhone') > -1 || navigator.userAgent.indexOf('iPad') > -1) && (navigator.userAgent.indexOf('Safari') === -1);var isWKWebView = isInApp && window.indexedDB; window.webkit && window.webkit.messageHandlers 로 구분하면 된다는 글도 있지만 내가 시도해 본 환경에서는 (LINE 인앱브라우저) 실패했음.

Web Audio API : decodeAudioData()

Tue, 23 Jun 2015 11:21:39 +0900

decodeAudioDataAsynchronously decodes the audio file data contained in the ArrayBuffer. The ArrayBuffer can, for example, be loaded from an XMLHttpRequest's response attribute after setting the responseType to "arraybuffer". Audio file data can be in any of the formats supported by the audio element.Although the primary method of interfacing with this function is via its promise return value, the callback parameters are provided for legacy reasons.The following steps must be performed:Let promise be a new promise.If audioData is null or not a valid ArrayBuffer:Let error be a DOMException whose.......

Samsung Browser (S-Browser) versions

Tue, 16 Jun 2015 14:17:13 +0900 Note: Some older devices such as the Galaxy S III did not get the Chromium based browser with the update to Android 4.2 or later. When Samsung later introduced the Galaxy S3 Neo it did get the new browser. Note: With the Android 4.3 release and version 1.5 of the Chromium browser, Samsung did not enable WebAudio API for the Note 3. All other devices did get the WebAudio API. Note: Samsung did not update the browser version with the upgrade from Android 4.3 to 4.4, but did add getUserMedia and WebRTC functionality. Note: It looks like S.......

HTML5 AudioContext

Fri, 12 Jun 2015 10:04:17 +0900

Playing Sounds with the Web Audio API The Web Audio API is a JavaScript interface that features the ability to: - Play a sound at a precise moment in time.- Synthesize aural tones and oscillations.- Mix sound effects with filters.- Access the raw bits of audio data. Related links:

HTML5 Audio duration property

Thu, 28 May 2015 11:49:01 +0900

HTML5 Audio duration property DeviceVersionBrowserUAValueOSXMavericksChromeChrome/43.0.2357.81 Safari/537.367.026925GalaxyNote2Android 4.1.2stock browserMobile Safari/534.307.02699995GalaxyNote2Android 4.1.2NAVER AppMobile Safari/534.307.02699995GalaxyNote2Android 4.1.2ChromeChrome/18.0.1025.166 Mobie Safari/535.19100GalaxyS4Android 4.2.2stock browserChrome/18.0.1025.308 Mobile Safari/535.19100GalaxyS4Android 4.2.2NAVER AppMobile Safari/534.307.02699995GalaxyS4Android 4.2.2ChromeChrome/42.0.2311.111 Mobile Safari/537.367.027GalaxyS4Android 4.3stock browserChrome/28.0.1500.94 Mobile Safari/537........

High-Performance, Garbage-Collector-Friendly Code

Tue, 19 May 2015 18:19:02 +0900 always creating a new object/array on every call is an important one to watch out for. There’s effectively no way to clear an object out of an array without feeling this pain. Whilst modern browsers are doing lots of nice optimizations around this, it’s still a killer when done excessively.


Mon, 18 May 2015 22:06:32 +0900

Facebook App. (iOS) :Mozilla/5.0 (iPhone; CPU iPhone OS 8_1_2 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12B440 [FBAN/FBIOS;FBAV/;FBBV/8930087;FBDV/iPhone7,2;FBMD/iPhone;FBSN/iPhone OS;FBSV/8.1.2;FBSS/2; FBCR/SKTelecom;FBID/phone;FBLC/ko_KR;FBOP/5]Facebook App. (Android):Mozilla/5.0 (Linux; Android 4.4.2; SM-G906S Build/KVT49L) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/ Mobile Safari/537.36 [FB_IAB/FB4A;FBAV/;]LINE (iOS) :Mozilla/5.0 (iPhone; CPU iPhone OS 8_1_2 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12B4.......

IE 8,9 에서 CORS 사용하기

Tue, 12 May 2015 15:03:10 +0900

XDomainRequest 서버에서 CORS 관련 헤더가 설정되어 있더라도IE8, 9 에서는 XMLHttpRequest (XHR) 객체로는 CORS 를 사용할 수 없기 때문에별도의 XDomainRequest (XDR) 이란 객체를 이용해야 한다. (IE10+ 부터는 XHR 로 통합됨). XDR 객체는 기본적인 사용법은 XHR 과 동일하며onload, onerror, ontimeout 등을 지원하지만 onreadystatechange 콜백은 지원하지 않는다.그런데 IE 7, 8 에서 onload 가 실행되지 않는 경우가 있어서 onreadystatechange 를 사용해야 한다. 따라서 IE 8 에서 CORS 사용시 분기에 유의해야 한다. XDR 에는 setRequestHeader() 도 없다.보통 XHR 로 요청할 때 setRequestHeader() 를 이용해 X-Requested-With: XMLH.......

m4a m4b m4v m4r mp4

Thu, 07 May 2015 14:40:58 +0900

MPEG-4 코덱 (Part14)을 사용하는 파일들은 일반적으로 .mp4 를 사용한다. - 오디오 트랙만 있는 파일은 .m4a 로 쓰기도 한다- 아이튠즈 스토어를 통해 판매되는 암호화 된 파일은 .m4p 확장자를 갖는다- 오디오북, 팟캐스트 파일은 추가적인 메타 데이터를 포함하고 있으며 .m4a 로 쓰기도 하지만 보통 .m4b 확장자를 사용한다- 아이폰 벨소리 파일도 같은 형식이지만 확장자는 .m4r 을 사용한다- Raw MPEG-4 영상 파일은 .m4v 확장자를 쓴다 결론은 포켓몬:이름은 달라도 우리는 모두 친구 While the only official filename extension defined by the standard is .mp4, various filename extensions are commonly used to indicate intended .......

JavaScript 로 엘리먼트 스타일을 변경하는 빠른 방법

Mon, 20 Apr 2015 11:54:41 +0900 element.classList.add() >element.className >>>> > >> element.setAttribute('style') >>>>> document.head.appendChild(document.createElement('style')) element.classList 를 사용할 수 있는 브라우저는? IE10+, FF, Chrome, Safari 및 iOS, Android. "General conclusion: changing the className is faster, except in Opera."iOS 7 Safari mobile: Class name change: 4ms. / Style change: 8ms.정해져있는 스타일이.......

HTML 엔티티로 특수 문자 (기호) 표시하기

Thu, 16 Apr 2015 17:06:30 +0900 자주 사용되는 기호 문자 비교>> ><< < 중간점·· · 말줄임표…… … 저작권 표시ⓒ© © 음표♫♫🎶🎶♬♬ 따옴표❝❝❞❞❛❛❜❜

JavaScript 한글 초성/중성/종성 분리

Wed, 01 Apr 2015 16:03:56 +0900

/** * 한글을 초성/중성/종성 단위로 잘라서 배열로 반환한다. * 공백은 반환하지 않는다. * * 참조: * */ String.prototype.toKorChars = function() { var cCho = [ 'ㄱ', 'ㄲ', 'ㄴ', 'ㄷ', 'ㄸ', 'ㄹ', 'ㅁ', 'ㅂ', 'ㅃ', 'ㅅ', 'ㅆ', 'ㅇ', 'ㅈ', 'ㅉ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ' ], cJung = [ 'ㅏ', 'ㅐ', 'ㅑ', 'ㅒ', 'ㅓ', 'ㅔ', 'ㅕ', 'ㅖ', 'ㅗ', 'ㅘ', 'ㅙ', 'ㅚ', 'ㅛ', 'ㅜ', 'ㅝ', 'ㅞ', 'ㅟ', 'ㅠ', 'ㅡ', 'ㅢ', 'ㅣ' ], cJ.......

JavaScript Element offset 을 얻어야 할 때 확인해 볼 만한 메소드

Mon, 30 Mar 2015 17:43:55 +0900 엘리먼트의 오프셋을 얻기 위해 사용할 수 있는 메소드.jQuery 의 .offset() 함수에서도 활용하고 있으며 사용 가능한 브라우저 범위가 넓은 편. 참고:

IE 호환성 모드 판단하기

Thu, 26 Mar 2015 16:44:00 +0900 navigator.userAgent 에 MSIE 7 과 Trident 가 같이 들어있으면 호환성 보기 모드로 볼 수 있다.navigator.userAgent 에 Trident 가 명시되기 시작한 것은 MSIE 8 이후. function isIECompat() { return (navigator.userAgent.indexOf('MSIE 7') > -1) && (navigator.userAgent.indexOf('Trident') > -1); }

IE 에서 현재 도메인이 신뢰할 수 있는 사이트에 등록되어 있는지 확인하기

Thu, 19 Mar 2015 15:28:13 +0900

현재 도메인이 "신뢰할 수 있는 사이트인가"는 아래의 몇 가지 방법으로 확인이 가능합니다.window.statusfunction isTrustedIE() { window.status = "test"; return (window.status == "test"); } ActiveXObject("Scripting.FileSystemObject");function isTrustedIE() { try { var test = new ActiveXObject("Scripting.FileSystemObject"); } catch(e) { return false; } return true; }

JavaScript 변수형 검사

Thu, 19 Mar 2015 11:57:08 +0900

문자열(String): typeof object === "string"숫자(Number): typeof object === "number"불린(Boolean): typeof object === "boolean"객체(Object): typeof object === "object"일반 객체(Plain Object): jQuery.isPlainObject( object )함수(Function): jQuery.isFunction( object )배열(Array): jQuery.isArray( object )요소(Element): object.nodeType널null: object === nullnull 또는 undefined: object == nullundefined:글로별 변수(Global Variables): typeof variable === "undefined"지역변수(Local Variables): variable === undefined프로퍼티(Properties): object.prop === undefined

CSS3 속성은 특히 모바일 환경에서 처음부터 끝까지 다 비용과의 싸움이다

Thu, 19 Mar 2015 01:39:06 +0900

"As with all the things in the CSS3 world, this clever trick comes at a cost.... Hardware acceleration helps prevent this problem, but it's still an issue to be aware of. Not all your users will have the luxury of hardware acceleration, and software rendered graphics can take their toll on the computer. " CSS3 속성은 특히 모바일 환경에서 처음부터 끝까지 다 비용과의 싸움이다. 많은 경우에 '하드웨어 가속을 받을 수 있는 속성을 적용하라'는게 마법의 해결책처럼 제시되지만 실제로 해보면 그것도 금방 한계를 만난다.

Benchmark - style vs. className

Thu, 19 Mar 2015 01:38:26 +0900

"General conclusion: changing the className is faster, except in Opera." iOS 7 Safari mobile: Class name change: 4ms. / Style change: 8ms. 정해져있는 스타일이라면 style 속성을 건드리기보다 className 을 제어하는 것이 좀 더 빠르다(고 한다). 하지만 둘 다 화면에 주는 변화에 따라서 Recalculate Style, Layout, Update layer tree, Composite Layers 등이 발생하는 것은 마찬가지.

Minimizing browser reflow

Thu, 19 Mar 2015 01:37:41 +0900 Reduce unnecessary DOM depth. Changes at one level in the DOM tree can cause changes at every level of the tree - all the way up to the root, and all the the way down into the children of the modified node. This leads to more time being spent performing reflow.Minimize CSS rules, and remove unused CSS rules.If you make complex rendering changes such as animations, do so out of the flow. Use position-absolute or position-fixed to accomplish this.Avoid unnecessary complex CSS selectors - descendant selectors in particular - which require more C.......

.innerHTML 보다 .firstChild.nodeValue

Thu, 19 Mar 2015 01:36:50 +0900 .innerHTML 대신 .firstChild.nodeValue 을 사용하라?

HTML5 Canvas 가 지원되는 브라우저인지 확인하는 방법

Thu, 19 Mar 2015 01:35:58 +0900

1. createElement('canvas') + getContext('2d') 2. !!window.HTMLCanvasElement; 2-1. !!window.CanvasRenderingContext2D; You must use the getContext approach for detecting WebGL support because, even though the browser may support the WebGLRenderingContext, getContext() may return null if the browser is unable to interface with the GPU due to driver issues and there is no software implementation. In this case, checking for the interface first allows you to skip checking for getContext: 단순히 캔버스 엘리먼트를 사용할 수 있는가(일반적으로 2d context)를 확인할 때에는 getContext() 를 해보는 방법도 있.......

paiza online hackathon

Thu, 19 Mar 2015 01:34:48 +0900

iOS Safari Mobile 에서의 최대 이미지 크기

Thu, 19 Mar 2015 01:33:34 +0900

결론: 가로 x 세로 <= 1024 x 1024 x 3 Image types have different limitations: JPG images can be up to 32 decoded megapixels, while PNG, GIF and TIFF can be up to 3 - 5 decoded megapixels (depending on device). The maximum size for PNG, GIF and TIFF varies due to the RAM on the device. Devices with less than 256 MB of RAM can be 3 decoded MP, while other iOS devices are limited to 5 decoded MP. The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels for devices with less than 256 MB RAM and 5 megapix.......

ECMAScript compatibility table

Thu, 19 Mar 2015 01:28:27 +0900

아이폰 해상도 가이드

Thu, 19 Mar 2015 01:27:16 +0900

iOS에서 scroll 이벤트 연속적으로 받기

Thu, 19 Mar 2015 01:25:53 +0900

div {overflow:scroll} 로 만든 스크롤 영역에서는 iOS7 에서도 연속적인 scroll 이벤트를 받을 수 있다. 단, 가속도(모멘텀)는 적용되지 않음. 만약 가속도 적용을 위해 -webkit-overflow-scrolling: touch; 속성을 붙이면 scroll 이벤트를 연속적으로 받을 수 없다. iOS8, WKWebView 에서는 기본적으로 연속적인 scroll 이벤트를 받을 수 있다.

웹툰의 가치

Thu, 19 Mar 2015 01:23:08 +0900

SNS와 인터넷, 모바일 등 다양한 장소에서 짧은 시간안에 가볍게 즐기기 위해서는 진득한 시간을 요구하는 텍스트 중심의 콘텐트보다 시각 콘텐트가 딱 좋은 것이다. 그 중에서도 비디오는 오디오와 함께 소비해야 제대로 즐길수 있을 뿐더러 정해진 플레이타임이 있어서 모바일에서 온전하게 즐기기에 여러모로 제약이 있다. 콘텐트 공급자의 측면에서도 영상물은 촬영, 편집, 연출 등 제작 비용이 높은 편이고 화질에 따라 차이는 있지만 필요한 네트워크 트래픽이 부담스럽기 마련이다. 빠르고 가볍게 소비할 수 있는 시각 콘텐트이면서 제작 비용이나 유통 비용이 영상, 음원 등에 비해 상대적으로 저렴하다는 장점이 있다.벤야민(Walter Ben.......

howler - modern web audio javascript library

Thu, 19 Mar 2015 01:17:43 +0900

레이어 중앙정렬

Thu, 19 Mar 2015 01:16:27 +0900

Transform을 넣은 요소의 자식에 fixed를 넣지말라.

Thu, 19 Mar 2015 01:14:02 +0900 부모 엘리먼트에 transform: translate 가 적용되어있다면자식 엘리먼트는 position:fixed 더라도 fixed 로 동작하지 않는다.transform 속성의 값으로 none 의외의 것을 넣으면 새로운 지역 좌표 시스템을 생성하기 때문.background-attachment 도 마찬가지.

JavaScript addEventListener

Thu, 19 Mar 2015 01:12:19 +0900이벤트 핸들러 인자로 handleEvent를 속성으로 갖는 instance를 넘겨주면 Callback으로 instance의 handleEvent가 호출된다. handleEvent를 쓰면, this의 binding을 할 필요가 없어서 코드가 간결해진다.

이미지가 30개 이상이면 domain sharding 을 고려

Thu, 19 Mar 2015 01:09:01 +0900 Connections for hostname: 대부분의 브라우저에서 평균 6~8개 정도.그래서 보통 이미지가 30개 이상이면 domain sharding 을 고려해 볼 만하다

CSS3 Animation 성능을 높이는 방법

Thu, 19 Mar 2015 01:08:13 +0900 GPU 가속 사용하기다음 style이 적용되면 브라우저는 GPU에 해당 엘리먼트 영역(Layer)을 메모리에 texture로 저장한다.-webkit-transform : translate3d-webkit-transform : translateZ-webkit-transform : rotate3d-webkit-transform : scale3d-webkit-transform-style : preserved-3d Layout 변경하는 스타일이나 메소드 사용하지 않기 Element : clientHeight, clientLeft, clientTop, clientWidth, focus(), getBoundingClientRect(), getClientRects(), innerText, offsetHeight, of.......

IE11 border-radius 버그

Thu, 19 Mar 2015 01:04:46 +0900

IE11 에서 실제 border 속성을 지정하지 않은 채 border-radius 만 적용하면 이상한 블러가 적용되는 버그.

WebGL Water

Thu, 19 Mar 2015 00:50:28 +0900

JavaScript 현재 스크롤 위치 얻기

Thu, 19 Mar 2015 00:47:30 +0900

window.pageYOffset: All browsers including IE9+. (.pageYOffset is alias of .scrollY) window.scrollY: FF, Chrome, Safari document.documentElement.scrollTop ordocument.body.scrollTop: IE8 or earlier Conclusion: Try to use the pageYOffset property first and if it is not supported, then use the scrollTop property of the html or the body element. Values returned by the scrollTop property of the html element require some correction in Internet Explorer earlier than version 8. window.pageYOffset is supported in all browsers except in Internet Explorer before version 9, and always returns the scroll a.......


Thu, 19 Mar 2015 00:41:01 +0900