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

WDC 1.7 readable code

WDC 1.6 controlling 3rd party scripts

types

- ads

- tracking

- social e.g discus, fb

- fonts

- libraries and framework

what the first #1 used 3rd script?

facebook.

whats the issue?

performance

single point of failure

privacy

potential solutions?

safe snippet

caching and hosted libs

tools and initiatives

--

performance?

- 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

e.g

twitter widget wont work in china

useful tool

spof-o-matic

u can debug and illustrate spof

--

solution

- put the code in the buttom

- using async or defer (load after)

- or load it manually using httprequest async

--

prevention

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

--

privacy?

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  

--

solutions

-google use asyn scripts

-jsmanners (rating for scripts)

summary

* 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

bitly.iy/3rdparty-code-14

--

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

awe.js

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

--

code

awe.init

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)

awe.projection.add

easy to create dynamic objects and dynamic location

audio 3d is easy

slides : https://buildar.com/awe/tutorials/intro_to_awe.js/index.html

--

--

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

modularity

current color

border : solid currentcolor

use cascading with css from parent

--

 demo

:root{

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

[foo$=bar]

e.g put the image for file type

:not()

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

p:target 

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

*li:matches

* :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

:host

* 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

polymer

- platform.ja polyfills

* mozilla bricks

--

frameworks,

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?

- webcomponents.org (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

--

summary

- math works everywhere

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

AngularJs with IPhone 3GS bug

I just killed annoying IPhone 3GS bug inside my angular app.

The symptom is when I hit "back" button, it doesn't want to go back.
I thought it was rendering bug in the old phone.
Luckily after spending couple hours debugging, it end up with problem inside "onDestroy" event of couple my directives.

It doesn't support element.remove(). which "remove" is undefined.
So I just need to use angular.element(element).remove() which fix the problem.

In summary, when your page doesn't render on back button or next button, make sure you check all onDestroy event on your particular page.

Recursively scroll

Crawling your app in SPA Application

Crawling your app

To allow indexing of your AJAX application, you have to add special meta tag in the head section of your document:

1.  <meta name="fragment" content="!" />

This will cause crawler bot to request links with _escaped_fragment_ param so that your server can recognize the crawler and serve a HTML snapshots. For more information about this technique, see Making AJAX Applications Crawlable.

Dynamic Object with custom object graph and loose rule option

Recently, I need this custom dynamic object to parse my razor model which require a loose type and object graph.

such as
Model.ConnectionString.Test
Model.ConnectionString
Model.ConnectionString.Test2

if there is no value, it will give empty string instead of error when calling RazorEngine.Parse()

Here is the dynamic object, use it when you really need it.