AngularJS

Understanding AngularJS

These are the questions I encountered while trying to wrap my head around it:

Q: What does it do?

A: With AngularJS, HTML is no longer just static elements waiting to be manipulated to go alive, they are the structure and the logic. “They extend HTML by teaching HTML new tricks.” E.g., with a drop down menu, traditionally we’d go:

Continue reading →

Standard
CSS

Samsung S3 Image Blurry Problem

This is a strange bug with S3. Set these both on image tag would do the trick:

opacity:0.999999;
-webkit-backface-visibility: hidden;

Unfortunately, the exact same method cause error on S4, and S3 and S4 have the same screen width/height, 320×640. So instead of writing pixel-accurate @media stylesheets, use:

var ua = window.navigator.userAgent.toLowerCase();
window.platform ={
    ...
    isS3: ua.match(/gt\-i9300/i)!==null
}
if (platform.isS3){
    $('img').css{'opacity': 0.9999, 'webkitBackfaceVisibility': 'hidden'};
}

PS: Doesn’t work with background image.

Standard
JavaScript, Performance

Famo.us Intro

Questions:

1. What is famo.us? What makes it special?

A JavaScript framework which helps you create smooth, complex UIs for any screen. Stress on the smooth part. Famo.us elements are styled with position:absolute and their positions are defined by matrix3d webkit transforms. This is what makes Famo.us performant.

Continue reading →

Standard
JavaScript

Difference between Scrolls

  • window.scrollX: current window horizontal offset number
  • window.scrollY: current window vertical offset number, For cross-browser compatibility, use window.pageYOffset instead of window.scrollY
  • window.pageYOffset: an alias for the scrollY property, but older versions of Internet Explorer (< 9) do not support either property and must be worked around by checking other non-standard properties, see: fully compatible example
  • window.scroll(x, y): absolute scroll
  • window.scrollTo(x, y): absolute scroll, effectively the same as widow.scroll(x, y)
  • window.scrollBy(x, y): relative scroll
  • window.scrollMaxX: the maximum number of pixels that the document can be scrolled horizontally
  • window.scrollMaxY: the maximum number of pixels that the document can be scrolled vertically
  • element.scrollIntoView(alignWithTop): scrolls elements into view
  • HTMLElement.offsetTop: returns the distance of the current element relative to the top of the offsetParent node
  • jQuery’s offset(): returns an object that includes the top and left offset of the element, e.g. Object{top: 223, left: 312.5}
  • jQuery’s offsetParent(): Get the closest ancestor element that is positioned
  • jQuery’s scrollTop(): wraps things up, but it’s the same thing. Also, it could be called to scroll compared to an element. See code below

Continue reading →

Standard