Wednesday, May 21, 2014

angular scroll with animation for accordion mobile

Recently we want to have scroll animation which works with accordion in mobile.
angular-scroll has bugs where it only check the top position instead recheck this every time.

If you have same issue, feel free to try this version.

Ps. Thanks to Matt for this.

Tuesday, May 13, 2014

Improve your site click on mobile site

  • disable user-scalable

<meta name="viewport" content="width=device-width, user-scalable=no" />
  • check any css which has heavy performance such as *first-child
  • create grouping by hide and show components, it will your less dom objects.

Friday, May 09, 2014

Debug your services call using fiddler

add this into your web.config

    <defaultProxy enabled="true" useDefaultCredentials="true">
      <proxy autoDetect="false" bypassonlocal="false" proxyaddress="" usesystemdefault="false">

Monday, May 05, 2014

Errorception with angularjs

Easy and simple fix to use errorception with anguljar js.

Just add this code to handle error in angularjs.

Friday, May 02, 2014


- u need put context when u learn math

- web components, is it ready?
short answer would't use it now if u support ie 10

but its about the concept like using angular directives.

- high level or low level?
u need to know both

- eduction should teach low or high?
should be low

- are we gonna loosing commonality of languages?

- why not much women?
just said we want u..

- isLogin is that good name?
if ur function name called and.. it doing too much.

WDC 2.9 the future of indieweb manifesto 2001

in the old days everyone have their own url instead of name.

2002 friendly silos arrived.
- sharing

2006 - social network
easy signup
ur friend friends
reading and posting (where u can comment)

2007 popularizes simplicity
extremely simple ui

2007 facebook f8 platform launch
2008 facebook connect
2014 facebook f8 
it reminds at as worker hive back to silos

geocities shutdown
upcoming shutdown
posterous shutdown

what went wrong in 2003?
peak independent web.
- atom vs rss ? arguing plumbing instead of UI
- trackback or pingback is spam
- pingback noise user experience. it was designed by backend

decline if personal sites
- distracted by format wars
- social net to connect to people
- silo ux evolved: twiter fb

distraction vs focus

2008 social web foo camp - federation twitter and jaiku
but didnt happened

2010 federated social web summit
- too much talking not enough building
- architecture astronot. (abstraction)
- more talkers
- complacent complexity . eg oauth. salmon

i dont care about federation, i care abt mu content and my friend

docs wiki

- show dont tell
- creators only
- must have domain nane to attend
- use ur site as openid to signin to wiki
- rsvp on wiki
- creators may bring an apprentice

what we learn?
- no mailing list. instead irc archived
- simplicity
oauth => indieauth
pingback => drop xml rpc just http (webmention)
easier pubs and consumers
user exp first

copy the best e.g copy from twitter ui into our web

2014 do we have a chance?
- peak silo ux -> fb like twitter
they stuck

* publish on his own site and itpublish  everywhere
distribution interactions

indieweb wants u.
to own ur data , permalinks abd ur identity online

irc #indiewebcamp
build indieweb into ur site

WDC 2.8 ImProve ur ajax app

what is reliable service?

it is context dependend

reliable ajax service
99% time
doesnt get stuck
handle required number of request

but many fail
- bad input
- connectivity and timeout
- encoding
- server error
- client abort

clientside error
server error
error after processing

error in client no one knows
use window.onerror and handle the error
u can debug using print stack
angularjs errorhandler

-- handle server handler
give info with error obj.

-- status code
avoid 404 coz u can't differntiate whether it hit ur server or not instead using error obj

use angularjs error interceptors

put notification if there is no internetconnection 

- offline storage
use firedb or couchdb

handle error is not only tech thing bust all decision maker need to get involved

increase reliable also increase complexity

- log errors
- handle errors

WDC 2.7 streaming the web

stream flow and back pressure

do one thing and do it well

e.g file system give files but process can't cope with it process will give back pressure

rather than push... use pull when the process finish

do pull stream instead

it is addictive pattern

WDC 2.6 frontend security

--untrusted data
location & uirs
window name
indirect sources
other objs. always validate from event sources.

-execution sink
eval() - click handler
-html elements sink
-location sink
if someone else to navigate u

-control flow sink

- minimize attack surface
avoid convert string to script
eval,timeout, etc
avoid innerhtml where possjble
use .textContent, document.createElement

- template approach
placeholder like angularjs
use bind instead of {{}}

- html input?
dont write ur own sanitizer
but if u do
parse input (using document.createElement) instead regex
whitelist of dom nodes
keep only that it safe instead of blacklist

- sanitizer
angular $sanitize

avoid eval & innerHtml
use template language but be careful with attribhte
filter html input conservatively

do framework make things better?
domxss wiki
mustache security wiki

$(location.hash) is fixed but reintroduxe agajn
append after before html, etc


this won't be pickup by security analysis

{{expression}} in 1.1.5 will execute script

but it fixed now.

in general frameworks add complexity so u need to understand
e.g web components

this is really easy to get wrong
but there is 
content security policy
whitelist of content sources
its a bit restrictive

angular is the best coz has csp mode
angular 1.2 is good

- avoid innerhtml
- understand frameworks
- csp provide additional layer of protection
- csp solve script injection but not all problems like control flows

WDC 2.5 TLS?

-lesson from heartbleeding

Tls complex protocol
many implementation
dangerous close to monoculturr
opensource is not magical
incident handling is reallt important

more tls, why?
coz cookies canbe expose without tls or mix tls

more encription is the good things

http/2 is for speed but firefox and chrome  over tls
to encourage every site to use tls

transparent tls, there is no https or lock but still negotioting tls
- but still debatable

everyone can issue certificate and ur browser trusted

what happenig now

-http strict trnasport secuirty
http sts
only available for https

- public key pin
- certificate transparancy

more speed
- chacha20 poly1305
new cyper for DjB which faster

- Tls 1.3
encript the handshake
reduce handshake latency
improve crypto
start now end eoy


WDC 2.4 closures

WDC 2.3 ES6 Data strutures

ES6 data structure

["key"] = test
is it data structure or inheritance?

construct from "from" methid

new data structure

- set
bucket of unique values
no duplicates
new Set()

- maps (like dictionary) or relationship
new Maps)

- weakMap (map without memory leak)
similar to map
only obj that u can map
references as weakly held

e.g if using map which reference other obj. and we remove it. then there is memory leak

easy way to write not to not memory leak

-weakSet (no memory leak set)


for(var [index,value] of array.entries){}

keys() values() are iterators

you can start using this by transfillers?

WDC 2.2 async javascript pattern

WDC 2.1 Offline first

demo about todo list.
when the server off, it doesn't sync until the server on again.

offline problem
-trust problem.
i want to be sure that my data is there when i need it.

taking screenshot of your app. because u dont trust the app e.g map

-always online architecture
as mob user i want to use app with doesn't require to be online.

- my data isn't with me.
let me have a copy on my device
*always accessible personal data

rss reader should have bew dara un them when u open.

obviously important data store locally.

smart offline maps.

offline first challenge
- save vs sync

give signal red yellow green about connection instead of loading gif

-informing users about sync outcomes
e.g chat

- performance (zero latency)
- robust
- better experiences (save all time)

is it worth it?
-more usage in mobile

we need to communicate better language to the user about offline first

check this link

Thursday, May 01, 2014

WDC Conference 2014 Summary slides by KK

Enjoy my interactive slides for this conference

WDC 1.10 you dont know SVG

mostly the dont know svg
try to avoid it
change name - responsive graphics

snap.svg libraries

e.g make a accelorometer
flash make cpu 100 percent

the most powerful svg 
- path
m50,50 move 
l100 draw line
h500 draw horizontal
z close the path

the magic of <use> element

owesome is created a life copy of dom elements.

<circle ..
<use xlink:href..

better than container
it will create for total shape


masking and cliping, animation already been there long time ago before css

the fun part when combining it togather 
e.g pattern and mask

text in the path..
powerful feature but never implemented in real life.

u can use css in svg

nested svg inside svg

css transformation is originated from svg

multimeter using svg

- stop being affraid with svg
- web already have svg and u have been ignoring svg for a while

svg vs canvas faster?
like knive vs sword., go check for it..

its all backup with dom level so if u create 100 balls running around, it will be slower because it has backup dom


WDC 1.9 ecmascript 6 better js for the ambient webera

the ambient of computing era

- corporate - cobol, fortran
- personal - c++ family
- ambient - javascript

why js?
coz worse is better

- already there
- widest reach
- lowest risk
- write libs and apps once
- single knowledge and skillset

is it even possible to replace it?

how does js evolved?

invented in 10 days in may 1995
mocha- livescript- js

javascript cloned in microsoft ie3.0 jscript

standarization ecma scrjpt

called ecma becuse java is sun., js is microsoft
so use ecma for none owner naming

-- ecmascript?
ecmascript is the standard that define javascript

not part of w3c

js implementation
- google v8
- mozila spidermonkey
- microsoft chakra
- webkit jscore

2009 ecmascript 5 :
use strict - json, object.create, etc

2008 javascript performance problem.
2013 performance improved

2014 es6 almost done,

es6 improvement
- more concise syntax
modules and sandkng boxing
class declaration
control abstraction
array comprehensions
string interpolations

tc39 its not like this..
and not like this..
google, ms, fb, netflix, safarj, jquery, ebay, yahoo, ie, intels

ecma design challenges

the closure in loop problem

foreach() objcallback(x)

x will take the last.

local scoping WTF

var x
function x()


so what x will be?

why u need to worry about the edgecases?

because it will work on the browser but not on other browser

how we fix?
closire in loop?
instead var using let
let p in x
let v = doSomethjbg (x,p)

let will binding on scope variable

but want to avoid new let WTF

let x = 1
let x = 2

let x =
var x = 

the solution, there will static error.
anybody shouldn't code this things.

avoid inconsistent scoping WTF?
let x = 1
functionf ()
console log (x)
let x = 2

what will u get 1/ undefined / 2?
- never leaking scope.

avoid bogus const
using const x = 3
will be an error

-- but u need it in forward declaration
e.g mutual function
r1 = f(r2)
r2 = f(r1)

error vased upon time of actual access
nor upon position in source code
must be intialize before

what abt block scope function?
function g()

browser agree it will applied after it declared

but also disageee how to handle if g is not declare and call on the top or in the block or outside the block

unfortunately browser agree violate block scoping

its real
will be the future soon

WDC 1.8 device Api

Small api which give device capabilities to browsers

work on chrome and firefox

where wild apis live?
- spec changes alot

highly change specs
- sensor api
- web nfc
- networj apis

sensor api?
temp, humidity, pressure
e.g content base on temperature 

web nfc?
just in time capabilities

network api?

-- settle down
- proximity
- battery status

device promixity how close to other device

user event - if there is user near,

batterie status api?
current energy state

-- stable
- vibration
- ambient light

e.g form if there is error.

ambient light?
event obj- light
light level
e.g changing contract level at night or bright day

WDC 1.7 readable code

WDC 1.6 controlling 3rd party scripts

- ads
- tracking
- social e.g discus, fb
- fonts
- libraries and framework

what the first #1 used 3rd script?

whats the issue?
single point of failure

potential solutions?
safe snippet
caching and hosted libs
tools and initiatives

- slowdown ur homepage
the value u get must be greater than the performance hit u r taking

precription- the fastest is the better use look ads.

e.g ymail vs gmail. ymail more ads

using no ads reduce 40%

single point of failure?
- will stops the function of page
script src=""

will block the page after this script

twitter widget wont work in china

useful tool

u can debug and illustrate spof

- put the code in the buttom
- using async or defer (load after)
- or load it manually using httprequest async

* protect urself with the help of tools

caching ?
dont always rely on it.
cache the script less so it there is error only last shorter

hosting cdn?
instead refer to cdn jquery
use the script if cdn available then use cdn if not than use local scripts

whats the verdict?
- use ur own cdn. 

e.g like button
what they dont tell u? track, visited ip,etc

privacy hero solutions
2 click solutions,(open search)
- click enable like button  

-google use asyn scripts
-jsmanners (rating for scripts)

* before copy paste scripts
- refuse no async
- put risk in sla (uptime,etc)
- review jsmanner
- ask for server side options
- evaluate tag managers
- investigate hosted libs (cdn)
- monitors3x (use monitoring tools)
- provide non blocking code samples and simple



bootstrap or not?

for backend dev or css newbee
- love it
- all there
- very quick to implement
- pick and choose component base

for experience front end
- hate it
- its use for prototype
- hate all sites looks the same
- harder when u want to build custom stuff coz u do overidding it.
- like working on cms instead of custom site

other framework to look at 'suit css'

WDC 1 QA 1

when to use this new tecnologies?
can't do at work because need to support different browser

look for the standard and predict for the future. 

like to jump on earlier like css filter but it only low risk just presentation enhancement

how about flexbox? do u need to change implementation overtime

u can use solve with preprocessor to fallback


WDC 1.5 augmented web


the easiest way to create augmented web experiences

awe-standard doesn't run on ios
but there is fallback

awe.js deal witg webrtc,webgl. sensor fusion and augmented realitg

e.g geo location marker space

using ar demo


ready finction
require  capabilities, files, 

key actions
- list,
- view (get poi)

based on screne
key feature is point of interrst
media are adfrf at poi

awe.pois,add( position)


easy to create dynamic objects and dynamic location

audio 3d is easy



WDC 1.4 css variables

css variables foundamentally simple

* preprocessors

* flexbox
fluid, complex layout , great for responsibility design

* calc()
for calculatoon

* variables ?

SASS - like less
e.g bootstrap
variables files 850 lines

-- organization

current color
border : solid currentcolor
use cascading with css from parent


--color: green

u can change the variable through javascript selector

blink-dev google group

rework css preprocessor

or css variables polyfil


WDC 1.3 power of css selectors

css actually really powerful not only for styling page

* beyond classes and id
using attribute instead of classes

end with substring

e.g put the image for file type

style everything except h1

u can test for testing e.g if doesn't have alt. give red border

e.g if table no summary

:target to highlight href #
link and href


e.g highlight href
- open accordion but a bit hacky.


u can use in jquery selector

css level 4 in the future

* !parentselector
!ul >active


* :localLink
if it is locallink (0 ) means root

WDC 1.2 web components

* one of umbrella term on html5

* templates
- insert DOM

* custome element (like directive in angularjs)
- define bew elements

* lifecycle events

* shadow DOM
- e.g video player control
- encapsulation
- iframe without a baggage

* shadow dom css

* composibility
components must do 1 think well.
make it so generic style withno class so everyone can override it

e.g img avatar which get the src and username

* u can start using today
- platform.ja polyfills

* mozilla bricks

like angular directive
it will be on top of web components..
so u dont need to use polymers

conflicts and relationship
- global polution
- namespace to avoid conflicts
- can't create relationship e.g select and option
- dependency management
- versioning?
- accessible, perfomance, security?

- (check this out for answer all those questions)
-- they have review system.

--- summary
- composibility for web componest
- polymer and x-tag allow to buiild today
- spec is changing rapidly
- chrome and firefox support
- fav framework like angular will use native api in the future

WDC 1.1 math and robots

- use math using node and draw in front end canvas. instead using canvas to draw and dance.

- robotics
can canvas determine that? it need to use math

- part 4 - beyond browser
jjohny five module is jquery for hardware

- math works everywhere
- try to understand why math, where math and digin math.. u will find more opportunity.