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.
Wednesday, May 21, 2014
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
<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>
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.
Just add this code to handle error in angularjs.
Friday, May 02, 2014
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.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.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
Thursday, May 01, 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.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
--
--
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.
Subscribe to:
Posts (Atom)