My Quick Git Process

Create your own branch..

commit your changes
  git commit -m "..."

push changes to your backup
  git push backup branch-name

modify your code


commit with amend
  git commit --amend 

push your changes to remote again with force
   git push backup branch-name -f


once finish your feature... and code review...

merge back to master with 1 commit
 git merge master

Using Reserve Proxy for your Single Page App to ovoid CORS

There are couple ways to eliminate CORS, but one of my favourite is to setup reserve proxy server.

Here simplest way how to do it.

1. Install ARR
http://www.iis.net/learn/extensions/installing-application-request-routing-(arr)

2. Enable Proxy
IIS > Select your server > Aplication Request Routing > Server Proxy Setting > Check Enable Proxy

3. Add Url Rewrite inside your site web.config.

<configuration>
<system.webServer>
  <rewrite>
    <rules>
        <rule name="Reverse Proxy to API" stopProcessing="true">
            <match url="^api/(.*)" />
            <action type="Rewrite" url="http://some.api/v1/{R:1}" />
        </rule>
    </rules>
</rewrite>
</system.webServer>
</configuration>

4. Done, now when you request /api in your site, it will automatically forward that to http://come.api/v1/

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.

https://github.com/kkurni/angular-scroll/

https://gist.github.com/kkurni/98e664941ac1c373a3ff

Ps. Thanks to Matt for this.

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.

Debug your services call using fiddler

add this into your web.config

 <system.net>
    <defaultProxy enabled="true" useDefaultCredentials="true">
      <proxy autoDetect="false" bypassonlocal="false" proxyaddress="http://127.0.0.1:6666" usesystemdefault="false">
      </proxy>
    </defaultProxy>
  </system.net>
 

Errorception with angularjs

Easy and simple fix to use errorception with anguljar js.

Just add this code to handle error in angularjs.

WDC 2 QA

- 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

independentday.org manifesto 2001

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

2002 friendly silos arrived.

- sharing

2006 - social network

why?

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

--

2011 indiewebcamp.com

discusion

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

microformats2

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

wiki indiewebcamp.com

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

--

demo

error in client no one knows

solution

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

summary

- 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

nodestreams.com

--

do pull stream instead

--

it is addictive pattern

WDC 2.6 frontend security

--untrusted data

location & uirs

cookies

referrer

window name

indirect sources

other objs. always validate from event sources.

--sinks

-execution sink

eval() - click handler

-html elements sink

-location sink

window.location=input

if someone else to navigate u

-control flow sink

--

solutions

- 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

bleach.js

DomPurify

--

summary

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

--

jquery? 

$(location.hash) is fixed but reintroduxe agajn

element.add(usercontent)

append after before html, etc

knockout? 

ko.applyBinding()

data-bind="click:.."

this won't be pickup by security analysis

angularjs?

{{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

ng-csp

angular 1.2 is good

--

summary

- 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

--

howmyssl.com

isTlsfasyet.com

bettercrypto.com

WDC 2.4 closures

WDC 2.3 ES6 Data strutures

ES6 data structure

-object

{}

["key"] = test

is it data structure or inheritance?

-array

construct from "from" methid

Array.from()

push

slice

pop

--

new data structure

- set

bucket of unique values

no duplicates

new Set()

.add();

.has()

.delete()

- maps (like dictionary) or relationship

new Maps)

.set(str,str)

- 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)

-iterators

array.entries()

iterator.next()

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

--

award

- 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

http://hood.ie/#intro

WDC Conference 2014 Summary slides by KK

Enjoy my interactive slides for this conference

http://kkurni.github.io/slides-wdc-2014/

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..

--

groups

better than container

it will create for total shape

--

pattern 

-- 

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

--

transformation

css transformation is originated from svg

--

demo 

multimeter using svg

--

summary

- 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

promises

string interpolations

subclasses

--

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)

obj.callback(x) 

x will take the last.

--

local scoping WTF

function(x,x)

var x

function x()

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

or 

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()

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

--

summary

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

proximity?

device promixity how close to other device

user event - if there is user near,

batterie status api?

current energy state

-- stable

- vibration

- ambient light

vibration?

navigator.vibrate(msec)

e.g form if there is error.

ambient light?

event obj- light

light level

e.g changing contract level at night or bright day

github.com/ajfisher/wdc