Kurniawan Kurniawan Blogs

TreeSet / ConcurrentSortedList cannot be removed once the value changes

2017-07-19T15:34:00.000+10:00

// Check this out.

class KK implements Comparable<KK> {
    public int value;
    public KK(int value) {
        this.value = value;    }

    @Override public int compareTo(KK o) {
        return Integer.compare(value, o.value);

    }
}

@Testvoid test_treeset() {
    SortedSet<KK> set = new TreeSet<>();

    KK a = new KK(5);

    KK b = new KK(10);
    set.add(a);    set.add(b);
    set.forEach(item -> System.out.println(item.value));
    // change b to less than a -> this will not remove the value after b value changes.

    // because it guranteed log n, so it will not find it.

    b.value = 4;

    set.remove(b);
    System.out.println("After remove -> it will not remove value");

    set.forEach(item -> System.out.println(item.value));}

My Quick Git Process

2015-07-24T13:23:00.002+10:00

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

2014-06-04T15:03:00.001+10:00

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

2014-05-21T15:56:00.000+10:00

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

2014-05-13T16:34:00.001+10:00

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

2014-05-09T13:03:00.002+10:00

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

2014-05-05T17:46:00.003+10:00

Easy and simple fix to use errorception with anguljar js.

Just add this code to handle error in angularjs.

WDC 2 QA

2014-05-02T17:15:00.001+10:00

- 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

2014-05-02T16:21:00.001+10:00

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

2014-05-02T14:56:00.001+10:00

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

2014-05-02T14:38:00.001+10:00

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

2014-05-02T14:11:00.001+10:00

--untrusted data

location & uirs

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?

2014-05-02T12:33:00.001+10:00

-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

2014-05-02T11:59:00.001+10:00

WDC 2.3 ES6 Data strutures

2014-05-02T11:57:00.001+10:00

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

2014-05-02T10:48:00.001+10:00

WDC 2.1 Offline first

2014-05-02T09:57:00.001+10:00

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

2014-05-01T23:55:00.002+10:00

Enjoy my interactive slides for this conference

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

WDC 1.10 you dont know SVG

2014-05-01T16:27:00.001+10:00

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

2014-05-01T16:23:00.001+10:00

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

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

2014-05-01T14:48:00.001+10:00

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

2014-05-01T14:15:00.001+10:00

WDC 1.6 controlling 3rd party scripts

2014-05-01T13:44:00.001+10:00

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?

2014-05-01T13:40:00.001+10:00

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

2014-05-01T13:18:00.001+10:00

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