Imp. Meta Tags

<meta charset="utf-8" />
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
Advertisements

Angular 2 stack

SystemJS – Module loader

WebComponents – Polyfill for W3C spec – Basic UI Controls as native web components and be consumed by angular2 application components.

Angular2 – Base Framework

Cache – Needed but not present for ng2

UI Bootstrap/ng2-bootstrap – provides same features but in alpha

d3js, Highcharts – Charting(w/o jQuery)

InteractJS – UI interactions and gerstures compatible with mobile

Hammerjs – Touch

ag-grid – Native JS Grid with wrappers for ng1, ng2, webcomponents without additional dependencies

Immutablejs – Immutable data structures and implicit performance optimization

RxJS – Observable data streams to work with angular2 and also implement flux architecture pattern if needed – Implicit dependency of ng2.

lodash – Data manipulation and templating library

Zonejs – Thread-context simulation for JS – Implicit dependency of ng2

Ionic – ng2 version in development

ODatajs v4 – If components are using OData endpoints

 

TS/JS

Typescript – 1.7+ with all ES6/ES7 forward compatible features(including ES6 imports) with transpilation to ES5 CommonJS/SystemJS/AMD modules

Gulp – Build tooling iwth plugins for CSS, SCSS, htmlmin, tslint, jslint, tscompile, tsdoc, jsdoc, ng2template inlining, minification, etc

Jasmine with Karma – Unit testing

SinonJS – Optional for stubbing out test data

Protractor – E2E, Integration tests for angular built on top of Selenium

Benchpress – Performance testing well integrated with angular2

Youtube Center Settings FTW

I’ve had a long love-have relationship with Youtube Center extension for Chrome. I use it primarily to auto control the resolution and auto full screen my youtube videos. Basically it stopped full screening and so I gave up on it for 6 months or so, and now they seem to have fixed it, so i’m back on it.

Here’re some settings that I us. You can goto the extension’s settings and import these:

{“player_gap”:false,”google_apikey”:””,”placementTransformation”:[],”hideFooter”:false,”enablePlayerDocking”:false,”hideHeaderWhenPlayerPlayingTransitionTime”:600,”hideHeaderWhenPlayerPlayingKeepScrollPosition”:false,”hideHeaderWhenPlayerPlayingFocus”:true,”hideHeaderWhenPlayerPlayingMouseThreshold”:90,”hideHeaderWhenPlayerPlayingMouseVisibility”:true,”hideHeaderWhenPlayerPlayingTransition”:true,”hideHeaderWhenPlayerPlaying”:false,”limitSearchRowWidthEnabled”:false,”limitSearchRowWidth”:700,”useStaticLogo”:true,”defaultLanguage”:”en-US”,”hideWatchLaterOnPlayer”:false,”likedislikeUIEnabled”:false,”sparkbarEnabled”:false,”videoThumbnailQualityFPS”:true,”enableComments”:false,”channelUploadedVideosPlaylist”:false,”ytOnlyStageMode”:false,”playerGlowEffectOnPlayer”:”both”,”bufferEnabled”:false,”bufferSize”:569228273678,”embedBufferEnabled”:false,”embedBufferSize”:569228273678,”channelBufferEnabled”:false,”channelBufferSize”:569228273678,”playlistAutoPlay”:true,”playlistAutoPlayFreeze”:false,”playerGlowEnabled”:false,”playerGlowPixelInterval”:100,”playerGlowRequestAnimationFrame”:true,”playerGlowUpdateInterval”:20,”playerGlowTransition”:0,”playerGlowBlur”:15,”playerGlowSpread”:5,”playerGlowOpacity”:75,”playerGlowFactor”:50,”playerMultiGlowEffect”:true,”playerMultiGlowEffectDepth”:10,”playerMultiGlowEffectBlockInterval”:5,”likeButtonColor”:”#000000″,”likeButtonHoverColor”:”#000000″,”dislikeButtonColor”:”#000000″,”dislikeButtonHoverColor”:”#000000″,”likedButtonColor”:”#2793e6″,”likedButtonHoverColor”:”#2793e6″,”dislikedButtonColor”:”#000000″,”dislikedButtonHoverColor”:”#000000″,”likeButtonOpacity”:60,”likeButtonHoverOpacity”:70,”dislikeButtonOpacity”:60,”dislikeButtonHoverOpacity”:70,”likedButtonOpacity”:80,”likedButtonHoverOpacity”:100,”dislikedButtonOpacity”:80,”dislikedButtonHoverOpacity”:100,”enable_custom_fexp”:false,”custom_fexp”:””,”hideLangAlert”:false,”staticHeader_scrollToPlayer”:false,”staticHeader”:false,”debugConsole”:true,”gridCollectionPage”:false,”logoLink”:”/”,”hideRecommendedChannels”:false,”repeatShowText”:true,”enableYouTubeShortcuts”:true,”disableFeedItemActionMenu”:false,”disableGuideCount”:false,”YouTubeExperiments”:[],”headlineTitleExpanded”:false,”videoThumbnailQualitySeparated”:true,”embedWriteEmbedMethodReloadDelay”:1000,”embedWriteEmbedMethod”:”test5″,”fixHTML5Annotations”:false,”saveErrorStatusTimeout”:5000,”saveStatusTimeout”:2000,”flexWidthOnChannelPage”:false,”playerDarkSideBGRetro”:false,”playerDarkSideBGColor”:”#1b1b1b”,”playerDarkSideBG”:false,”videoThumbnailRatingsBarHeight”:2,”sparkbarHeight”:2,”sparkbarLikesColor”:”#590″,”sparkbarDislikesColor”:”#ccc”,”commentsPlusLinkRedirectConfirm”:true,”commentsPlusScrollToCommentAtCollapse”:true,”commentsPlusRemoveLinks”:false,”commentsPlusBlacklist”:[{“type”:”equals”,”length”:1},{“type”:”repeat”,”amount”:9},{“type”:”profilelinks”,”regex”:”${username}”,”attr”:”textContent”},{“type”:”hashlinks”,”regex”:”fixyoutube”,”attr”:”textContent”}],”commentsPlusWhitelist”:[],”likeSwitchToTab”:”none”,”endOfVideoAutoSwitchToTab”:”none”,”topScrollPlayerEnabled”:true,”topScrollPlayerActivated”:true,”topScrollPlayerExitOnVideoEnd”:false,”topScrollPlayerEnterOnVideoPlay”:false,”topScrollPlayerExitOnVideoPause”:false,”topScrollPlayerTimesToEnter”:1,”topScrollPlayerTimesToExit”:0,”topScrollPlayerCountIncreaseBefore”:true,”topScrollPlayerHideScrollbar”:false,”topScrollPlayerBumpTimer”:2000,”topScrollPlayerAnimation”:false,”topScrollPlayerEnabledOnlyVideoPlaying”:true,”topScrollPlayerScrollUpToExit”:false,”debug_settings_playersize”:false,”debug_settings_buttonPlacement”:false,”debug_settings_videoThumbnailData”:false,”debug_settings_commentCountryData”:false,”debug_settings_watchedVideos”:false,”debug_settings_notwatchedVideos”:false,”debug_playervars”:false,”debug_spf_args”:false,”signatureDecipher”:[],”embed_defaultAutoplay”:true,”hideTicker”:false,”enableEndscreenAutoplay”:true,”removeYouTubeTitleSuffix”:false,”playerPlayingTitleIndicator”:false,”playerOnlyOneInstancePlaying”:false,”videoThumbnailAnimationEnabled”:false,”videoThumbnailAnimationShuffle”:false,”videoThumbnailAnimationDelay”:1000,”videoThumbnailAnimationInterval”:700,”videoThumbnailAnimationFallbackInterval”:2000,”forcePlayerType”:”default”,”embed_forcePlayerType”:”default”,”channel_forcePlayerType”:”default”,”settingsDialogMode”:true,”ytExperimentFixedTopbar”:false,”ytspf”:false,”videoThumbnailCacheSize”:500,”commentCacheSize”:500,”watchedVideosIndicator”:true,”hideWatchedVideos”:false,”watchedVideos”:[“qcTWTBjYTg0″,”7sXCiypFvtI”,”EwMNzXVcMhU”,”OsMX_o26YeQ”,”YQHsXMglC9A”,”QcIy9NiNbmo”,”U8Xi5c1UWDk”,”EQKxSejEe9I”,”I6e-Xdr-qGg”,”U39J4V1dcOc”,”5O_EyriAedI”,”wpGvMk2C7i8″,”Xzn2ecB4Hzs”,”Ehw8PTA4QkE”,”ZQD7kxrV2p4″,”G6xr6VKg7sE”,”OnTelUJrDhc”,”ZGoWtY_h4xo”,”OMOGaugKpzs”,”9BMwcO6_hyA”,”AEIVhBS6baE”,”kclXuc_J50Y”,”0-ggsgFh5TI”,”pIBoAh4OXhQ”,”Dp6lbdoprZ0″,”3re1UuumglI”,”sK7riqg2mr4″,”z5eNzM1ukhs”,”4CM6iSNRtTc”,”c2gSzYLJ8sY”,”WfmA9s0LwHg”,”lj_hK-kxDyY”,”uv0KofQ8LXQ”,”KLYwt0YmQw8″,”WYLKrc3LxmU”,”wqCYGbVmkWo”,”5lSjR64A1tU”,”u2TnhuT4SuE”,”_gvErLvSkpE”,”KZlGzbWoV2s”,”hYXjbBfcvjU”,”SF8qwUJZB5E”,”ZUdC3fE7wco”,”CYuLgf5r8TI”,”kWFk9wzmPcQ”,”Ymt4kp1hS2s”,”NobzfIebbrE”,”6Zxy_dScjsM”,”oIuvIDhcs8E”,”pZD-FKaSyj4″,”ANh4NeEnxV4″,”S43XnOxK1Kk”,”ABmUCZYVK-E”,”14E2TLnpEfE”,”rjWwMUTm48I”,”-aZLXTCjXgs”,”nh4xGBIMGUw”,”t8iWqJ-baTk”,”JMQ_JklLFu8″,”Yia_60miioE”,”fEIwDzxoE5c”,”XcMrHpLd9C4″,”6JH4Ca0oMXU”,”C3lWwBslWqg”,”gFIEiVPyErg”,”EOMT9PoGsFk”,”PjxkMLfAyZU”,”zjTVAdROXM8″,”3t5fDRVrJeY”,”BQk-Bvhafe0″,”odvJg_EQhBg”,”EnNCcDekMUI”,”h0-aV9-YP_A”,”zE63__8iqGQ”,”r3er3z0VPaw”,”75MYwqSQ9w4″,”jcAGGemNL2c”,”zq-YcE1z14Q”,”xUec04_6gRs”,”d27gTrPPAyk”,”lB6a-iD6ZOY”,”18-j07WST5w”,”6V-bTpisFLw”,”DapCwtDSSzA”,”x-_AGAuGV2c”,”yWHB8PKOzOw”,”LiVRuON0FHk”,”4LPNXjZi0WE”,”O7EOjwSl-9o”,”Gnvw23EImII”,”cVsaDOLfQPs”,”OAZd_TDvSH4″,”QSPQPBhFp0s”,”kiJJKPCP4vk”,”nnRkZI0yfWI”,”RtQgWDiaT9w”,”LeLi_Whav3I”,”mLXN3hMW9Eg”,”EUnIh3jTqjU”,”0hUxIO09hPA”,”AWnB_8IPZ_s”,”O8I_jlyUHRQ”,”wMxzRpImPgo”,”bwAh3Z0shsE”,”kpuGjzdHqgI”,”WaarL0LC7V0″,”s86-Z-CbaHA”,”cOv9tJRv-hU”,”4c4FBaYghCY”,”eu4iLBMtZYE”,”Nqo2EBxgVo8″,”d65TwLRFjtw”,”lNqrTTDZwuI”,”Gki8RuMhy28″,”h3DHCUlpRYU”,”LrkWmxSUyQ4″,”JRbiu_kH-HM”,”KRfhM0UMkIE”,”lj_0pW_Z7Yw”,”s5WzHixjWGA”,”MLIjc4AlK2Q”,”2ImNfC86v4I”,”uuGCUwHGv4E”,”XleNCxdeePk”,”hOHcgdM01JI”,”CdBoTKOW1Xo”,”xskz4hcif2w”,”mrSAA6I5v0E”,”c1h4dwQpkDg”,”MbiPZCJm_1M”,”WRfCasST7x4″,”exV0rybIM9o”,”3ka_CFcbClg”,”UOWFzyyBNJs”,”3n6kxB9_GD8″,”t08iqPwfVHU”,”x3Lx8ceTTog”,”_ibqpyFC8VI”,”Jjv-MtGpj2U”,”XKNQQDg46Vs”,”Qhuc3jP_MQw”,”mMF_9SIp8Hs”,”9on6u7pI3vY”,”3Ry-ztk2mlw”,”eLNxHy1AVWI”,”NY-XBC1N7do”,”wGID-zvMVIg”,”fLzlKbgNDw8″,”iZ3BoqypGYU”,”QBNe1ezJYTM”,”KT_R0mLDzaI”,”AgAy1BwgGPU”,”UW99Na_Ze2s”,”SOessajf_Ik”,”6-n_szx2XRE”,”Xbp6umQT58A”,”JYTyluv4Gws”],”notwatchedVideos”:[],”watchedVideosLimit”:10000,”notwatchedVideosLimit”:10000,”gridSubscriptionsPage”:false,”compatibilityCheckerForChromeDisable”:false,”removeRelatedVideosEndscreen”:false,”enableResize”:false,”guideMode”:”default”,”uploaderCountryEnabled”:false,”uploaderCountryShowFlag”:false,”uploaderCountryUseNames”:false,”uploaderCountryPosition”:”after_username”,”commentCountryData”:[],”commentCountryEnabled”:false,”commentCountryShowFlag”:false,”commentCountryUseNames”:false,”commentCountryLazyLoad”:false,”commentCountryButtonLoad”:false,”commentCountryPosition”:”after_username”,”videoThumbnailData”:[{“id”:”0cgLniSj5O8″,”reused”:5,”date”:1453358207033,”likes”:3767,”dislikes”:2415},{“id”:”5Yonaw57Zxk”,”reused”:5,”date”:1453358207035,”likes”:506,”dislikes”:151},{“id”:”xozvqGpRXkw”,”reused”:5,”date”:1453358207035,”likes”:29974,”dislikes”:6948},{“id”:”aKFo1k9Mq2E”,”reused”:5,”date”:1453358207035,”likes”:1672,”dislikes”:917},{“id”:”Njp8bKpi-vg”,”reused”:5,”date”:1453358207035,”likes”:8436,”dislikes”:636},{“id”:”_se8c-wN35M”,”reused”:5,”date”:1453358207036,”likes”:23900,”dislikes”:1857,”stream”:{“bitrate”:”643019″,”size”:”640×480″,”lmt”:”1394309846698124″,”quality_label”:”480p”,”index”:”709-2180″,”fps”:”24″,”clen”:”37905079″,”projection_type”:”1″,”init”:”0-708″,”type”:”video/mp4; codecs=\”avc1.4d401e\””,”itag”:”135″,”dash”:true},”storyboard”:”https://i.ytimg.com/sb/_se8c-wN35M/storyboard3_L$L/$N.jpg|48#27#100#10#10#0#default#Mz8oHh-mk8G24j-06_uaEgeJtwE|60#45#121#10#10#5000#M$M#fHNhAM9Q9ZsQB4JZSBQPr_Q-1RA|120#90#121#5#5#5000#M$M#g3t-bd98eQfSUG45tcLV_cH86Ks|240#180#121#3#3#5000#M$M#zwFCqmK7AsfHqM7IN8g-dJwPgt4″},{“id”:”DnGDozi-hv8″,”reused”:5,”date”:1453358207036,”likes”:1437,”dislikes”:821},{“id”:”FCFl74M4mMA”,”reused”:5,”date”:1453358207036,”likes”:197,”dislikes”:99},{“id”:”k36RlJ906fM”,”reused”:5,”date”:1453358207036,”likes”:10724,”dislikes”:4557},{“id”:”AgAy1BwgGPU”,”reused”:5,”date”:1453358207847,”likes”:1946,”dislikes”:787,”stream”:{“clen”:”95463154″,”bitrate”:”2763689″,”type”:”video/mp4; codecs=\”avc1.640028\””,”fps”:”25″,”quality_label”:”1080p”,”lmt”:”1431862652466529″,”init”:”0-712″,”itag”:”137″,”size”:”1920×1080″,”index”:”713-1692″,”projection_type”:”1″,”dash”:true},”storyboard”:”https://i.ytimg.com/sb/AgAy1BwgGPU/storyboard3_L$L/$N.jpg|48#27#100#10#10#0#default#jBWw5JACCIKMB85N13XkQZXBwTA|80#45#82#10#10#5000#M$M#q92zDXBMruWjMnI-jgdNGTqSJjw|160#90#82#5#5#5000#M$M#gSt-d7eKYzCRM4R3NFPYIQv-4M0″},{“id”:”6rZKd4_fl34″,”reused”:5,”date”:1453358207849,”likes”:9547,”dislikes”:3974},{“id”:”JYTyluv4Gws”,”reused”:2,”date”:1453359674359,”stream”:{“index”:”710-6417″,”init”:”0-709″,”size”:”640×360″,”itag”:”134″,”quality_label”:”360p”,”projection_type”:”1″,”fps”:”25″,”lmt”:”1394287575128411″,”type”:”video/mp4; codecs=\”avc1.4d401e\””,”bitrate”:”608281″,”clen”:”101490745″,”dash”:true},”storyboard”:”https://i.ytimg.com/sb/JYTyluv4Gws/storyboard3_L$L/$N.jpg|48#27#100#10#10#0#default#BhKR1vFmECEoc0SXzV0Hlk4ZeYA|80#45#256#10#10#10000#M$M#U2BkZJv_CFsFkuHLlZIIK6AKILM|160#90#256#5#5#10000#M$M#7jfxiueWAQ1G2cQpWvBH-JSQfSw”,”likes”:9807,”dislikes”:722},{“id”:”_ZgUyjzPSh8″,”reused”:0,”date”:1453359731651,”stream”:{“clen”:”248947761″,”bitrate”:”2222937″,”type”:”video/mp4; codecs=\”avc1.4d401f\””,”fps”:”25″,”quality_label”:”720p”,”lmt”:”1436860399140312″,”init”:”0-710″,”itag”:”136″,”size”:”1280×720″,”index”:”711-4450″,”projection_type”:”1″,”dash”:true},”storyboard”:”https://i.ytimg.com/sb/_ZgUyjzPSh8/storyboard3_L$L/$N.jpg|48#27#100#10#10#0#default#0MgvJRJCFl7kSktUsfrxoyoYFD8|80#45#159#10#10#10000#M$M#hlyWfHaQL7p–_Myl_vws6wVM5M|160#90#159#5#5#10000#M$M#jsjV52q5ZC5g-gJB6qLKOqjh4fE|320#180#159#3#3#10000#M$M#v6HktTiIt2eVQNc9DfWuapo1860″,”likes”:2565,”dislikes”:228}],”videoThumbnailQualityBar”:true,”videoThumbnailQualityPosition”:”topleft”,”videoThumbnailQualityDownloadAt”:”hover_thumbnail”,”videoThumbnailQualityVisible”:”always”,”videoThumbnailRatingsBar”:true,”videoThumbnailRatingsBarPosition”:”bottom”,”videoThumbnailRatingsBarDownloadAt”:”scroll_into_view”,”videoThumbnailRatingsBarVisible”:”always”,”videoThumbnailRatingsBarLikesColor”:”#590″,”videoThumbnailRatingsBarDislikesColor”:”#f00″,”videoThumbnailRatingsBarDefaultColor”:”#ccc”,”videoThumbnailRatingsCount”:true,”videoThumbnailRatingsCountPosition”:”bottomleft”,”videoThumbnailRatingsCountDownloadAt”:”scroll_into_view”,”videoThumbnailRatingsCountVisible”:”show_hover”,”videoThumbnailWatchLaterPosition”:”bottomright”,”videoThumbnailWatchLaterVisible”:”show_hover”,”videoThumbnailTimeCodePosition”:”bottomright”,”videoThumbnailTimeCodeVisible”:”hide_hover”,”dashPlayback”:true,”embed_dashPlayback”:true,”channel_dashPlayback”:true,”language”:”auto”,”filename”:”{title}”,”fixfilename”:false,”flexWidthOnPage”:false,”enableAutoVideoQuality”:true,”autoVideoQuality”:”hd720″,”removeAdvertisements”:false,”preventAutoPlay”:false,”preventAutoBuffer”:false,”preventTabAutoPlay”:false,”preventTabAutoBuffer”:false,”preventTabPlaylistAutoPlay”:false,”preventTabPlaylistAutoBuffer”:false,”preventPlaylistAutoPlay”:false,”preventPlaylistAutoBuffer”:false,”scrollToPlayer”:true,”expandDescription”:false,”enableAnnotations”:true,”enableShortcuts”:true,”autohide”:”-1″,”enableVolume”:false,”volume”:100,”mute”:false,”enableDownload”:false,”downloadQuality”:”hd720″,”downloadFormat”:”mp4″,”downloadAsLinks”:true,”show3DInDownloadMenu”:false,”enableRepeat”:false,”repeatSave”:false,”autoActivateRepeat”:false,”mp3Services”:””,”lightbulbEnable”:false,”lightbulbBackgroundColor”:”#000000″,”lightbulbBackgroundOpaque”:74,”lightbulbClickThrough”:false,”lightbulbAutoOff”:false,”flashWMode”:”none”,”playerTheme”:”dark”,”playerColor”:”red”,”enableUpdateChecker”:true,”updateCheckerInterval”:”168″,”updateCheckerLastUpdate”:1453270122326,”channel_enableAutoVideoQuality”:true,”channel_autoVideoQuality”:”medium”,”channel_autohide”:”-1″,”channel_playerTheme”:”dark”,”channel_playerColor”:”red”,”channel_flashWMode”:”none”,”channel_enableAnnotations”:true,”channel_preventAutoPlay”:false,”channel_preventAutoBuffer”:true,”channel_enableVolume”:false,”channel_volume”:100,”channel_mute”:false,”channel_experimentalFlashMode”:”clone”,”channel_experimentalHTML5Mode”:”none”,”embed_enabled”:true,”embed_enableAutoVideoQuality”:true,”embed_autoVideoQuality”:”medium”,”embed_autohide”:”-1″,”embed_playerTheme”:”dark”,”embed_playerColor”:”red”,”embed_flashWMode”:”none”,”embed_enableAnnotations”:false,”embed_preventAutoPlay”:false,”embed_preventAutoBuffer”:true,”embed_enableVolume”:false,”embed_volume”:100,”embed_mute”:false,”resizeEnable”:false,”resizeSave”:false,”aspectEnable”:false,”aspectSave”:false,”aspectValue”:”default”,”repeatShowIcon”:true,”watch7playerguidehide”:false,”watch7playerguidealwayshide”:false,”removeBrandingBanner”:true,”removeBrandingBackground”:true,”removeBrandingWatermark”:true,”fixGuideNotVisible”:false,”hideFeedbackButton”:false,”bgcolor”:”default”,”embed_bgcolor”:”default”,”channel_bgcolor”:”default”,”player_wide”:false,”resize-default-playersize”:”default”,”resize-small-button”:”default_fit_to_content”,”resize-large-button”:”default_720″,”playerSizeAspect”:”16:9″,”resize-playersizes”:[{“id”:”default_small”,”config”:{“width”:””,”height”:””,”large”:false,”align”:true,”scrollToPlayer”:false,”scrollToPlayerButton”:false}},{“id”:”default_large”,”config”:{“width”:””,”height”:””,”large”:true,”align”:false,”scrollToPlayer”:false,”scrollToPlayerButton”:false}},{“id”:”default_fit_to_content”,”config”:{“customName”:”Fit to Content”,”width”:”1066px”,”height”:””,”large”:true,”align”:true,”scrollToPlayer”:false,”scrollToPlayerButton”:false}},{“id”:”default_collapse_player”,”config”:{“customName”:”Collapse The Player”,”width”:”640px”,”height”:”0px”,”large”:false,”align”:true,”scrollToPlayer”:false,”scrollToPlayerButton”:false}},{“id”:”default_720″,”config”:{“customName”:”720p”,”width”:”1280px”,”height”:””,”large”:true,”align”:false,”scrollToPlayer”:false,”scrollToPlayerButton”:false}},{“id”:”default_1080″,”config”:{“customName”:”1080p”,”width”:”1920px”,”height”:””,”large”:true,”align”:false,”scrollToPlayer”:false,”scrollToPlayerButton”:false}},{“id”:”default_70_percent”,”config”:{“customName”:”70%”,”width”:”70%”,”height”:””,”large”:true,”align”:false,”scrollToPlayer”:false,”scrollToPlayerButton”:false}},{“id”:”default_80_percent”,”config”:{“customName”:”80%”,”width”:”80%”,”height”:””,”large”:true,”align”:false,”scrollToPlayer”:false,”scrollToPlayerButton”:false}},{“id”:”default_90_percent”,”config”:{“customName”:”90%”,”width”:”90%”,”height”:””,”large”:true,”align”:false,”scrollToPlayer”:false,”scrollToPlayerButton”:false}},{“id”:”default_100_percent”,”config”:{“customName”:”Fill”,”width”:”100%”,”height”:”100%”,”large”:true,”align”:false,”scrollToPlayer”:true,”scrollToPlayerButton”:true}}],”lastUpdated”:1453359733437,”welcome_launched”:true,”cache”:{“profile_country”:{“size”:500,”items”:[{“i”:”UC6o-wWU-v2ClFMwougmK7dA”,”d”:”GB”,”e”:2678400000,”l”:1453273077768},{“i”:”UC56gTxNs4f9xZ7Pa2i5xNzg”,”d”:”IN”,”e”:2678400000,”l”:1453303581072},{“i”:”UC1GBYS8_8cXRDM3yOYHeyWw”,”d”:”IN”,”e”:2678400000,”l”:1453304239798},{“i”:”UCgneSpdEj2ZYTXFu41zWJYw”,”d”:”IN”,”e”:2678400000,”l”:1453305155596},{“i”:”UCttspZesZIDEwwpVIgoZtWQ”,”d”:”IN”,”e”:2678400000,”l”:1453306258983},{“i”:”UC9jj-YYSGUXvY2J2nYw9dNQ”,”d”:”US”,”e”:2678400000,”l”:1453306271998},{“i”:”UCzWQYUVCpZqtN93H8RR44Qw”,”d”:”US”,”e”:2678400000,”l”:1453306665492},{“i”:”UCpJmBQ8iNHXeQ7jQWDyGe3A”,”d”:”US”,”e”:2678400000,”l”:1453307294487},{“i”:”UCOmcA3f_RrH6b9NmcNa4tdg”,”d”:”US”,”e”:2678400000,”l”:1453307380952},{“i”:”UCgFP46yVT-GG4o1TgXn-04Q”,”d”:”US”,”e”:2678400000,”l”:1453321195428},{“i”:”UCjaRiAf5bRRwBRTSGH3fZhg”,”d”:”IN”,”e”:2678400000,”l”:1453322561566},{“i”:”UCZaT_X_mc0BI-djXOlfhqWQ”,”d”:”US”,”e”:2678400000,”l”:1453343497493},{“i”:”UCBJycsmduvYEL83R_U4JriQ”,”d”:”US”,”e”:2678400000,”l”:1453343709363},{“i”:”UCypNjM5hP1qcUqQZe57jNfg”,”d”:”KE”,”e”:2678400000,”l”:1453344756714},{“i”:”UCa35qyNpnlZ_u8n9qoAZbMQ”,”d”:”US”,”e”:2678400000,”l”:1453346476743}]}},”placementGroups”:{“ytcenter”:[{“type”:0,”uniqueId”:”downloadgroup”},{“type”:0,”uniqueId”:”repeatbtn”},{“type”:0,”uniqueId”:”lightbtn”},{“type”:0,”uniqueId”:”aspectbtn”},{“type”:0,”uniqueId”:”resizebtn”}],”watch8-secondary-actions”:[{“type”:1,”uniqueId”:”DIV#watch8-secondary-actions.watch-secondary-actions.yt-uix-button-group SPAN.yt-uix-clickcard”},{“type”:1,”uniqueId”:”DIV#watch8-secondary-actions.watch-secondary-actions.yt-uix-button-group BUTTON.yt-uix-button.yt-uix-button-size-default.yt-uix-button-opacity.yt-uix-button-has-icon.no-icon-markup.pause-resume-autoplay.action-panel-trigger.action-panel-trigger-share…yt-uix-tooltip”},{“type”:1,”uniqueId”:”DIV#watch8-secondary-actions.watch-secondary-actions.yt-uix-button-group DIV.yt-uix-menu”}],”watch8-sentiment-actions”:[{“type”:1,”uniqueId”:”DIV#watch7-views-info”},{“type”:1,”uniqueId”:”DIV#watch8-sentiment-actions SPAN.like-button-renderer”}]}}

Manage Application State with Immutable.js

ref :https://egghead.io/lessons/javascript-manage-application-state-with-immutable-js?series=learn-how-to-use-immutable-js

NOTES:

  • When we have var a = […] and we say var b = a; now b contains ref of a and so if someone changes b, a changes as well. This is not we expect.
  • This is what immutable.js prevents

TODO: Using Angular2 with ImmutableJS

RxJS 5.0

  • Rx combinators like flatMap etc take in promises and array etc iterables and treat them as observables
  • RxJS is primitive and framework agnostic
  • Angular2 uses it to emit events in forms and in Http stack
  • Promises can be converted to obs using Promise.toObs
  • to make Obs made from a Promise work with async await, simply susbs to this obs with forEach() so now it’s non cancelable and so when it completes, it resolves the promise, so say await Obs.forEach().
  • Rx has a AJAX stack in the lib for http webSockets etc.
  • Rx5 is rewrite for better perf by 5-10x and debuggability and comply with ES7 spec and is modular from ground up
  •  Post ES7, Rx would be useful for combinators
  • Backpressure ie server getting backed up with events while Observer is processing is not well handled by RxJS
    • This will be resolved in future with things like Reactive Streams
    • Web Socket integration with Rx is also planned
  • Rx is good use case for when you have a = b+ c and you want a to update when b or changes
  • Rx is useful for any value that changes over time and their interactions. So, in above eg. a is derived stream from b and c streams of events
  • Few lines of Rx can implement the Redux Standard

Angular 2 CheatSheet Concepts

REF:  cheat sheet:

  • <p>Employer: {{employer?.companyName}}</p> The Elvis operator (?) means that the employer field is optional and if undefined, the rest of the expression should be ignored.
  • [ngSwitch]=”conditionExpression”>
    [ngSwitchWhen]=”case1Exp”>…
    ngSwitchWhen=”case2LiteralString”>…
    ngSwitchDefault>…
    Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.

 

Directive configuration @Directive({ property1: value1, ... })
selector: '.cool-button:not(a)' Specifies a CSS selector that identifies this directive within a template. Supported selectors include element, [attribute], .class, and :not().

Does not support parent-child relationship selectors.

providers: [MyService, provide(...)] Array of dependency injection providers for this directive and its children.
  • Structural directives alter layout by adding, removing, and replacing elements in DOM.
      • *ngFor tells Angular to stamp out one <div> per hero in the heroes list.
      • *ngIf includes the HeroDetail component only if a selected hero exists.
    • Structural directives, like ngIf, do their magic by using the HTML 5 template tag.

      Outside of an Angular app, the <template> tag’s default CSS display property is none. It’s contents are invisible within a hiddendocument fragment.

      Inside of an app, Angular removes the<template> tags and their children. The contents are gone — but not forgotten

  • Attribute directives alter the appearance or behavior of an existing element. In templates they look like regular HTML attributes, hence the name.
    • The ngModel directive, which implements two-way data binding, is an example of an attribute directive.

 

Component configuration @Component extends @Directive, so the @Directiveconfiguration applies to components as well
viewProviders: [MyService, provide(...)] Array of dependency injection providers scoped to this component’s view.
Class field decorators for directives and components import {Input, ...} from 'angular2/core';
@HostBinding('[class.valid]') isValid; Binds a host element property (e.g. CSS class valid) to directive/component property (e.g. isValid).
@HostListener('click', ['$event']) onClick(e) {...} Subscribes to a host element event (e.g. click) with a directive/component method (e.g. onClick), optionally passing an argument ($event).
@ContentChild(myPredicate) myChildComponent; Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.
@ContentChildren(myPredicate) myChildComponents; Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.
@ViewChild(myPredicate) myChildComponent; Binds the first result of the component view query (myPredicate) to the myChildComponent property of the class. Not available for directives.
@ViewChildren(myPredicate) myChildComponents; Binds the results of the component view query (myPredicate) to the myChildComponents property of the class. Not available for directives.
Directive and component change detection and lifecycle hooks (implemented as class methods)
constructor(myService: MyService, ...) { ... } The class constructor is called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
ngOnChanges(changeRecord) { ... } Called after every change to input properties and before processing content or child views.
ngOnInit() { ... } Called after the constructor, initializing input properties, and the first call to ngOnChanges.
ngDoCheck() { ... } Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.
ngAfterContentInit() { ... } Called after ngOnInit when the component’s or directive’s content has been initialized.
ngAfterContentChecked() { ... } Called after every check of the component’s or directive’s content.
ngAfterViewInit() { ... } Called after ngAfterContentInit when the component’s view has been initialized. Applies to components only.
ngAfterViewChecked() { ... } Called after every check of the component’s view. Applies to components only.
ngOnDestroy() { ... } Called once, before the instance is destroyed.
  • ngOnChanges – called when an input or output binding value changes
  • ngOnInit – after the first ngOnChanges
  • ngDoCheck – developer’s custom change detection
  • ngAfterContentInit – after component content initialized
  • ngAfterContentChecked – after every check of component content
  • ngAfterViewInit – after component’s view(s) are initialized
  • ngAfterViewChecked – after every check of a component’s view(s)
  • ngOnDestroy – just before the directive is destroyed.
Dependency injection configuration import {provide} from 'angular2/core';
provide(MyService, {useClass: MyMockService}) Sets or overrides the provider for MyService to the MyMockService class.
provide(MyService, {useFactory: myFactory}) Sets or overrides the provider for MyService to the myFactory factory function.
provide(MyValue, {useValue: 41}) Sets or overrides the provider for MyValue to the value 41.