Found 54 repositories(showing 30)
symfony
Symfony polyfill for intl's ICU-related data and classes
mortzdk
A localStorage polyfill, that enables persistent storage of data in every browser.
mfranzke
Minimal and dependency-free vanilla JavaScript polyfill for the awesome datalist-functionality
jarek-foksa
Polyfill for SVG 2 getPathData() and setPathData() methods.
lunelson
Polyfill for map (hash/object) data functionality in libsass and ruby-sass < 3.3.x.
ShareIt-project
Web browser polyfill that implement the WebRTC DataChannel API over a websocket
formatjs
[MIGRATED] Utility to help you polyfill the Node.js runtime when the Intl APIs are missing, or if the built-in Intl is missing locale data that you need.
A pure JS (no jQuery required) implementation of the HTML5 datalist element
thgreasi
HTML5 datalist polyfill tutorial & library
unitycoder
Sensor fusion for Unity (gyroscope and accelerometer) to get smooth orientation data from mobile devices without drift. Based on github.com/googlevr/webvr-polyfill
saturnflyer
Adds the Ruby 3.2 Data class to lower Ruby versions
mhowerton91
<!DOCTYPE html> <!-- Copyright 2016 Google Inc. All Rights Reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <html> <head> <meta charset="utf-8"> <title>Chrome Platform Status</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <link rel="manifest" href="/static/manifest.json"> <meta name="theme-color" content="#366597"> <link rel="icon" sizes="192x192" href="/static/img/crstatus_192.png"> <!-- iOS: run in full-screen mode and display upper status bar as translucent --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <link rel="apple-touch-icon" href="/static/img/crstatus_128.png"> <link rel="apple-touch-icon-precomposed" href="/static/img/crstatus_128.png"> <link rel="shortcut icon" href="/static/img/crstatus_128.png"> <link rel="preconnect" href="https://www.google-analytics.com" crossorigin> <!-- <link rel="dns-prefetch" href="https://fonts.googleapis.com"> --> <!-- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> --> <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400" media="none" onload="this.media='all'"> --> <!-- <link rel="stylesheet" href="/static/css/main.css"> --> <style>html,body{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,pre,a,abbr,acronym,address,code,del,dfn,em,img,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tbody,tfoot,thead,tr{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}blockquote,q{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;quotes:"" ""}blockquote:before,q:before,blockquote:after,q:after{content:""}th,td,caption{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;text-align:left;font-weight:normal;vertical-align:middle}table{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;border-collapse:separate;border-spacing:0;vertical-align:middle}a img{border:none}*{box-sizing:border-box}*{-webkit-tap-highlight-color:transparent}h1,h2,h3,h4{font-weight:300}h1{font-size:30px}h2,h3,h4{color:#444}h2{font-size:25px}h3{font-size:20px}a{text-decoration:none;color:#4580c0}a:hover{text-decoration:underline;color:#366597}b{font-weight:600}input:not([type="submit"]),textarea{border:1px solid #D4D4D4}input:not([type="submit"])[disabled],textarea[disabled]{opacity:0.5}button,.button{display:inline-block;background:linear-gradient(#F9F9F9 40%, #E3E3E3 70%);border:1px solid #a9a9a9;border-radius:3px;padding:5px 8px;outline:none;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;text-shadow:1px 1px #fff;font-size:10pt}button:not(:disabled):hover{border-color:#515151}button:not(:disabled):active{background:linear-gradient(#E3E3E3 40%, #F9F9F9 70%)}.comma::after{content:',\00a0'}html,body{height:100%}body{color:#666;font:14px "Roboto", sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;background-color:#eee}body.loading #spinner{display:flex}body.loading chromedash-toast{visibility:hidden}#spinner{display:none;align-items:center;justify-content:center;position:fixed;height:calc(100% - 54px - $header-height);max-width:768px;width:100%}#site-banner{display:none;background:#4580c0;color:#fff;position:fixed;z-index:1;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;text-transform:capitalize;text-align:center;transform:rotate(35deg);right:-40px;top:20px;padding:10px 40px 8px 60px;box-shadow:inset 0px 5px 6px -3px rgba(0,0,0,0.4)}#site-banner iron-icon{margin-right:4px;height:20px;width:20px}#site-banner a{color:currentcolor;text-decoration:none}app-drawer{font-size:14px}app-drawer .drawer-content-wrapper{height:100%;overflow:auto;padding:16px}app-drawer paper-listbox{background-color:inherit !important}app-drawer paper-listbox paper-item{font-size:inherit !important}app-drawer h3{margin-bottom:16px;text-transform:uppercase;font-weight:500;font-size:14px;color:inherit}app-header{background-color:#eee;right:0;top:0;left:0;z-index:1}app-header[fixed]{position:fixed}.main-toolbar{display:flex;position:relative;padding:0 16px}header,footer{display:flex;align-items:center;text-shadow:0 1px 0 white}header{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}header a{text-decoration:none !important}header nav{display:flex;align-items:center;margin-left:16px}header nav a{background-color:#FAFAFA;background:linear-gradient(to bottom, white, #F2F2F2);padding:0.75em 1em;box-shadow:1px 1px 4px rgba(0,0,0,0.065);cursor:pointer;font-size:16px;text-align:center;border-radius:3px;border-bottom:1px solid #D4D4D4;border-right:1px solid #D4D4D4;white-space:nowrap}header nav a:active{position:relative;top:1px;left:1px;box-shadow:3px 3px 4px rgba(0,0,0,0.065)}header nav a.disabled{opacity:0.5;pointer-events:none}header nav paper-menu-button{margin:0 !important;padding:0 !important;line-height:1}header nav paper-menu-button .dropdown-content{display:flex;flex-direction:column;contain:content}header aside{background-color:#FAFAFA;background:linear-gradient(to bottom, white, #F2F2F2);padding:0.75em 1em;box-shadow:1px 1px 4px rgba(0,0,0,0.065);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-bottom:1px solid #D4D4D4;border-right:1px solid #D4D4D4;background:url(/static/img/chrome_logo.svg) no-repeat 16px 50%;background-size:48px;background-color:#fafafa;padding-left:72px}header aside hgroup a{color:currentcolor}header aside h1{line-height:1}header aside img{height:45px;width:45px;margin-right:7px}footer{background-color:#FAFAFA;background:linear-gradient(to bottom, white, #F2F2F2);padding:0.75em 1em;box-shadow:1px 1px 4px rgba(0,0,0,0.065);font-size:12px;box-shadow:0 -2px 5px rgba(0,0,0,0.065);display:flex;flex-direction:column;justify-content:center;text-align:center;position:fixed;bottom:0;left:0;right:0;z-index:3}footer div{margin-top:4px}.description{line-height:1.4}#subheader,.subheader{display:flex;align-items:center;margin:16px 0;max-width:768px}#subheader .num-features,.subheader .num-features{font-weight:400}#subheader div.search input,.subheader div.search input{width:200px;outline:none;padding:10px 7px}#subheader div.actionlinks,.subheader div.actionlinks{display:flex;justify-content:flex-end;flex:1 0 auto;margin-left:16px}#subheader div.actionlinks .blue-button,.subheader div.actionlinks .blue-button{background:#366597;color:#fff;display:inline-flex;align-items:center;justify-content:center;max-height:35px;min-width:5.14em;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent;text-transform:uppercase;text-decoration:none;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;padding:0.7em 0.57em}#subheader div.actionlinks .blue-button iron-icon,.subheader div.actionlinks .blue-button iron-icon{margin-right:8px;height:24px;width:24px}#subheader div.actionlinks .legend,.subheader div.actionlinks .legend{font-size:18px;cursor:pointer;text-decoration:none}#container{display:flex;flex-direction:column;height:100%;width:100%}#content{margin:16px;position:relative;height:100%}#panels{display:flex;width:100%;overflow:hidden}@media only screen and (min-width: 701px){.main-toolbar .toolbar-content{max-width:768px}app-header{padding-left:200px;left:0 !important}}@media only screen and (max-width: 700px){h1{font-size:24px}h2{font-size:20px}h3{font-size:15px}app-header .main-toolbar{padding:0;display:block}app-header .main-toolbar iron-icon{width:24px}app-drawer{z-index:2}#content{margin-left:0;margin-right:0}header{margin:0;display:block}header aside{display:flex;padding:8px;border-radius:0;background-size:24px;background-position:48px 50%}header aside hgroup{padding-left:48px}header aside hgroup span{display:none}header nav{margin:0;justify-content:center;flex-wrap:wrap}header nav a{padding:5px 10px;margin:0;border-radius:0;flex:1 0 auto}#panels{display:block}#panels nav{display:none}.subheader .description{margin:0 16px}#subheader div:not(.search){display:none}#subheader div.search{text-align:center;flex:1 0 0;margin:0}chromedash-toast{width:100%;left:0;margin:0}}@media only screen and (min-width: 1100px){#site-banner{display:block}}body.loading chromedash-legend{display:none}body.loading chromedash-featurelist{visibility:hidden}body.loading .main-toolbar .dropdown-content{display:none} </style> <!-- <link rel="stylesheet" href="/static/css/metrics/metrics.css"> --> <style>#content h3{margin-bottom:16px}.data-panel{max-width:768px}.data-panel .description{margin-bottom:1em}.metric-nav{list-style-type:none}.metric-nav h3:not(:first-of-type){margin-top:32px}.metric-nav li{text-align:center;border-top-left-radius:3px;border-top-right-radius:3px;background:linear-gradient(to bottom, white, #F2F2F2);box-shadow:1px 1px 4px rgba(0,0,0,0.065);padding:0.5em;margin-bottom:10px}@media only screen and (max-width: 700px){#subheader{margin:16px 0;text-align:center}.data-panel{margin:0 10px}} </style> <script> window.Polymer = window.Polymer || { dom: 'shadow', // Use native shadow dom. lazyRegister: 'max', useNativeCSSProperties: true, suppressTemplateNotifications: true, // Don't fire dom-change on dom-if, dom-bind, etc. suppressBindingNotifications: true // disableUpgradeEnabled: true // Works with `disable-upgrade` attr. When removed, upgrades element. }; var $ = function(selector) { return document.querySelector(selector); }; var $$ = function(selector) { return document.querySelectorAll(selector); }; </script> <style is="custom-style"> app-drawer { --app-drawer-width: 200px; --app-drawer-content-container: { background: #eee; }; } paper-item { --paper-item: { cursor: pointer; }; } </style> <link rel="import" href="/static/elements/metrics-imports.vulcanize.html"> </head> <body class="loading"> <!--<div id="site-banner"> <a href="https://www.youtube.com/watch?v=Rd0plknSPYU" target="_blank"> <iron-icon icon="chromestatus:ondemand-video"></iron-icon> How we built it</a> </div>--> <app-drawer-layout fullbleed> <app-drawer swipe-open> <div class="drawer-content-wrapper"> <ul class="metric-nav"> <h3>All properties</h3> <li><a href="/metrics/css/popularity">Stack rank</a></li> <li><a href="/metrics/css/timeline/popularity">Timeline</a></li> <h3>Animated properties</h3> <li><a href="/metrics/css/animated">Stack rank</a></li> <li><a href="/metrics/css/timeline/animated">Timeline</a></li> </ul> </div> </app-drawer> <app-header-layout> <app-header reveals fixed effects="waterfall"> <div class="main-toolbar"> <div class="toolbar-content"> <header> <aside> <iron-icon icon="chromestatus:menu" drawer-toggle></iron-icon> <hgroup> <a href="/features" target="_top"><h1>Chrome Platform Status</h1></a> <span>feature support & usage metrics</span> </hgroup> </aside> <nav> <a href="/features">Features</a> <a href="/samples" class="features">Samples</a> <paper-menu-button vertical-align="top" horizontal-align="right"> <a href="javascript:void(0)" class="dropdown-trigger">Usage Metrics</a> <div class="dropdown-content" hidden> <!-- hidden removed by lazy load code. --> <a href="/metrics/css/popularity" class="metrics">CSS</a> <a href="/metrics/feature/popularity" class="metrics">JS/HTML</a> </div> </paper-menu-button> </nav> </header> <div id="subheader"> <h2>CSS usage metrics > animated properties > timeline</h2> </div> </div> </div> </app-header> <div id="content"> <div id="spinner"><img src="/static/img/ring.svg"></div> <div class="data-panel"> <p class="description">Percentages are the number of times (as the fraction of all animated properties) this property is animated.</p> <chromedash-feature-timeline type="css" view="animated" title="Percentage of times (as the fraction of all animated properties) this property is animated." ></chromedash-feature-timeline> </div> </div> </app-header-layout> <footer> <p>Except as otherwise noted, the content of this page under <a href="https://creativecommons.org/licenses/by/2.5/">CC Attribution 2.5</a> license. Code examples are <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/LICENSE">Apache-2.0</a>.</p> <div><a href="https://groups.google.com/a/chromium.org/forum/#!newtopic/blink-dev">File content issue</a> | <a href="https://docs.google.com/a/chromium.org/forms/d/1djZD0COt4NgRwDYesNLkYAb_O8YL39eEvF78vk06R9c/viewform">Request "edit" access</a> | <a href="https://github.com/GoogleChrome/chromium-dashboard/issues">File site bug</a> | <a href="https://docs.google.com/document/d/1jrSlM4Yhae7XCJ8BuasWx71CvDEMMbSKbXwx7hoh1Co/edit?pli=1" target="_blank">About</a> | <a href="https://www.google.com/accounts/ServiceLogin?service=ah&passive=true&continue=https://appengine.google.com/_ah/conflogin%3Fcontinue%3Dhttps://www.chromestatus.com/metrics/css/timeline/animated">Login</a> </div> </footer> </app-drawer-layout> <chromedash-toast msg="Welcome to chromestatus.com!"></chromedash-toast> <script> /*! (c) 2017 Copyright (c) 2016 The Google Inc. All rights reserved. (Apache2) */ "use strict";function _classCallCheck(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,r){for(var n=0;n<r.length;n++){var t=r[n];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(e,t.key,t)}}return function(r,n,t){return n&&e(r.prototype,n),t&&e(r,t),r}}(),Metric=function(){function e(r){if(_classCallCheck(this,e),!r)throw Error("Please provide a metric name");if(!e.supportsPerfMark&&(console.warn("Timeline won't be marked for \""+r+'".'),!e.supportsPerfNow))throw Error("This library cannot be used in this browser.");this.name=r}return _createClass(e,[{key:"duration",get:function(){var r=this._end-this._start;if(e.supportsPerfMark){var n=performance.getEntriesByName(this.name)[0];n&&"measure"!==n.entryType&&(r=n.duration)}return r||-1}}],[{key:"supportsPerfNow",get:function(){return performance&&performance.now}},{key:"supportsPerfMark",get:function(){return performance&&performance.mark}}]),_createClass(e,[{key:"log",value:function(){return console.info(this.name,this.duration,"ms"),this}},{key:"logAll",value:function(){var r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.name;if(e.supportsPerfNow)for(var n=window.performance.getEntriesByName(r),t=0;t<n.length;++t){var a=n[t];console.info(r,a.duration,"ms")}return this}},{key:"start",value:function(){return this._start?(console.warn("Recording already started."),this):(this._start=performance.now(),e.supportsPerfMark&&performance.mark("mark_"+this.name+"_start"),this)}},{key:"end",value:function(){if(this._end)return console.warn("Recording already stopped."),this;if(this._end=performance.now(),e.supportsPerfMark){var r="mark_"+this.name+"_start",n="mark_"+this.name+"_end";performance.mark(n),performance.measure(this.name,r,n)}return this}},{key:"sendToAnalytics",value:function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.name,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.duration;return window.ga?n>=0&&ga("send","timing",e,r,n):console.warn("Google Analytics has not been loaded"),this}}]),e}(); </script> <script> document.addEventListener('WebComponentsReady', function(e) { var timeline = $('chromedash-feature-timeline'); timeline.props = [[469,"alias-epub-caption-side"],[470,"alias-epub-text-combine"],[471,"alias-epub-text-emphasis"],[472,"alias-epub-text-emphasis-color"],[473,"alias-epub-text-emphasis-style"],[474,"alias-epub-text-orientation"],[475,"alias-epub-text-transform"],[476,"alias-epub-word-break"],[477,"alias-epub-writing-mode"],[478,"alias-webkit-align-content"],[479,"alias-webkit-align-items"],[480,"alias-webkit-align-self"],[166,"alias-webkit-animation"],[167,"alias-webkit-animation-delay"],[169,"alias-webkit-animation-duration"],[170,"alias-webkit-animation-fill-mode"],[171,"alias-webkit-animation-iteration-count"],[172,"alias-webkit-animation-name"],[173,"alias-webkit-animation-play-state"],[174,"alias-webkit-animation-timing-function"],[177,"alias-webkit-backface-visibility"],[181,"alias-webkit-background-size"],[481,"alias-webkit-border-bottom-left-radius"],[482,"alias-webkit-border-bottom-right-radius"],[197,"alias-webkit-border-radius"],[483,"alias-webkit-border-top-left-radius"],[484,"alias-webkit-border-top-right-radius"],[212,"alias-webkit-box-shadow"],[485,"alias-webkit-box-sizing"],[218,"alias-webkit-column-count"],[219,"alias-webkit-column-gap"],[221,"alias-webkit-column-rule"],[222,"alias-webkit-column-rule-color"],[223,"alias-webkit-column-rule-style"],[224,"alias-webkit-column-rule-width"],[225,"alias-webkit-column-span"],[226,"alias-webkit-column-width"],[227,"alias-webkit-columns"],[486,"alias-webkit-flex"],[487,"alias-webkit-flex-basis"],[488,"alias-webkit-flex-direction"],[489,"alias-webkit-flex-flow"],[490,"alias-webkit-flex-grow"],[491,"alias-webkit-flex-shrink"],[492,"alias-webkit-flex-wrap"],[493,"alias-webkit-justify-content"],[494,"alias-webkit-opacity"],[495,"alias-webkit-order"],[308,"alias-webkit-perspective"],[309,"alias-webkit-perspective-origin"],[496,"alias-webkit-shape-image-threshold"],[497,"alias-webkit-shape-margin"],[498,"alias-webkit-shape-outside"],[537,"alias-webkit-text-size-adjust"],[326,"alias-webkit-transform"],[327,"alias-webkit-transform-origin"],[331,"alias-webkit-transform-style"],[332,"alias-webkit-transition"],[333,"alias-webkit-transition-delay"],[334,"alias-webkit-transition-duration"],[335,"alias-webkit-transition-property"],[336,"alias-webkit-transition-timing-function"],[230,"align-content"],[231,"align-items"],[232,"align-self"],[386,"alignment-baseline"],[454,"all"],[424,"animation"],[425,"animation-delay"],[426,"animation-direction"],[427,"animation-duration"],[428,"animation-fill-mode"],[429,"animation-iteration-count"],[430,"animation-name"],[431,"animation-play-state"],[432,"animation-timing-function"],[532,"apply-at-rule"],[508,"backdrop-filter"],[451,"backface-visibility"],[21,"background"],[22,"background-attachment"],[419,"background-blend-mode"],[23,"background-clip"],[24,"background-color"],[25,"background-image"],[26,"background-origin"],[27,"background-position"],[28,"background-position-x"],[29,"background-position-y"],[30,"background-repeat"],[31,"background-repeat-x"],[32,"background-repeat-y"],[33,"background-size"],[387,"baseline-shift"],[551,"block-size"],[34,"border"],[35,"border-bottom"],[36,"border-bottom-color"],[37,"border-bottom-left-radius"],[38,"border-bottom-right-radius"],[39,"border-bottom-style"],[40,"border-bottom-width"],[41,"border-collapse"],[42,"border-color"],[43,"border-image"],[44,"border-image-outset"],[45,"border-image-repeat"],[46,"border-image-slice"],[47,"border-image-source"],[48,"border-image-width"],[49,"border-left"],[50,"border-left-color"],[51,"border-left-style"],[52,"border-left-width"],[53,"border-radius"],[54,"border-right"],[55,"border-right-color"],[56,"border-right-style"],[57,"border-right-width"],[58,"border-spacing"],[59,"border-style"],[60,"border-top"],[61,"border-top-color"],[62,"border-top-left-radius"],[63,"border-top-right-radius"],[64,"border-top-style"],[65,"border-top-width"],[66,"border-width"],[67,"bottom"],[68,"box-shadow"],[69,"box-sizing"],[520,"break-after"],[521,"break-before"],[522,"break-inside"],[416,"buffered-rendering"],[70,"caption-side"],[547,"caret-color"],[71,"clear"],[72,"clip"],[355,"clip-path"],[356,"clip-rule"],[2,"color"],[365,"color-interpolation"],[366,"color-interpolation-filters"],[367,"color-profile"],[368,"color-rendering"],[523,"column-count"],[440,"column-fill"],[524,"column-gap"],[525,"column-rule"],[526,"column-rule-color"],[527,"column-rule-style"],[528,"column-rule-width"],[529,"column-span"],[530,"column-width"],[531,"columns"],[517,"contain"],[74,"content"],[75,"counter-increment"],[76,"counter-reset"],[77,"cursor"],[466,"cx"],[467,"cy"],[518,"d"],[3,"direction"],[4,"display"],[388,"dominant-baseline"],[78,"empty-cells"],[358,"enable-background"],[369,"fill"],[370,"fill-opacity"],[371,"fill-rule"],[359,"filter"],[233,"flex"],[234,"flex-basis"],[235,"flex-direction"],[236,"flex-flow"],[237,"flex-grow"],[238,"flex-shrink"],[239,"flex-wrap"],[79,"float"],[360,"flood-color"],[361,"flood-opacity"],[5,"font"],[516,"font-display"],[6,"font-family"],[514,"font-feature-settings"],[13,"font-kerning"],[7,"font-size"],[465,"font-size-adjust"],[80,"font-stretch"],[8,"font-style"],[9,"font-variant"],[533,"font-variant-caps"],[15,"font-variant-ligatures"],[535,"font-variant-numeric"],[549,"font-variation-settings"],[10,"font-weight"],[389,"glyph-orientation-horizontal"],[390,"glyph-orientation-vertical"],[453,"grid"],[422,"grid-area"],[418,"grid-auto-columns"],[250,"grid-auto-flow"],[417,"grid-auto-rows"],[248,"grid-column"],[245,"grid-column-end"],[511,"grid-column-gap"],[244,"grid-column-start"],[513,"grid-gap"],[249,"grid-row"],[247,"grid-row-end"],[512,"grid-row-gap"],[246,"grid-row-start"],[452,"grid-template"],[423,"grid-template-areas"],[242,"grid-template-columns"],[243,"grid-template-rows"],[81,"height"],[534,"hyphens"],[397,"image-orientation"],[507,"image-orientation"],[82,"image-rendering"],[398,"image-resolution"],[550,"inline-size"],[438,"internal-callback"],[436,"isolation"],[240,"justify-content"],[455,"justify-items"],[443,"justify-self"],[391,"kerning"],[83,"left"],[84,"letter-spacing"],[362,"lighting-color"],[556,"line-break"],[20,"line-height"],[85,"list-style"],[86,"list-style-image"],[87,"list-style-position"],[88,"list-style-type"],[89,"margin"],[90,"margin-bottom"],[91,"margin-left"],[92,"margin-right"],[93,"margin-top"],[372,"marker"],[373,"marker-end"],[374,"marker-mid"],[375,"marker-start"],[357,"mask"],[435,"mask-source-type"],[376,"mask-type"],[555,"max-block-size"],[94,"max-height"],[554,"max-inline-size"],[95,"max-width"],[406,"max-zoom"],[553,"min-block-size"],[96,"min-height"],[552,"min-inline-size"],[97,"min-width"],[407,"min-zoom"],[420,"mix-blend-mode"],[460,"motion"],[458,"motion-offset"],[457,"motion-path"],[459,"motion-rotation"],[433,"object-fit"],[437,"object-position"],[543,"offset"],[544,"offset-anchor"],[540,"offset-distance"],[541,"offset-path"],[545,"offset-position"],[548,"offset-rotate"],[542,"offset-rotation"],[98,"opacity"],[303,"order"],[408,"orientation"],[99,"orphans"],[100,"outline"],[101,"outline-color"],[102,"outline-offset"],[103,"outline-style"],[104,"outline-width"],[105,"overflow"],[538,"overflow-anchor"],[106,"overflow-wrap"],[107,"overflow-x"],[108,"overflow-y"],[109,"padding"],[110,"padding-bottom"],[111,"padding-left"],[112,"padding-right"],[113,"padding-top"],[114,"page"],[115,"page-break-after"],[116,"page-break-before"],[117,"page-break-inside"],[434,"paint-order"],[449,"perspective"],[450,"perspective-origin"],[557,"place-content"],[558,"place-items"],[118,"pointer-events"],[119,"position"],[120,"quotes"],[468,"r"],[121,"resize"],[122,"right"],[505,"rotate"],[463,"rx"],[464,"ry"],[506,"scale"],[444,"scroll-behavior"],[456,"scroll-blocks-on"],[502,"scroll-snap-coordinate"],[503,"scroll-snap-destination"],[500,"scroll-snap-points-x"],[501,"scroll-snap-points-y"],[499,"scroll-snap-type"],[439,"shape-image-threshold"],[346,"shape-inside"],[348,"shape-margin"],[347,"shape-outside"],[349,"shape-padding"],[377,"shape-rendering"],[123,"size"],[519,"snap-height"],[125,"speak"],[124,"src"],[363,"stop-color"],[364,"stop-opacity"],[378,"stroke"],[379,"stroke-dasharray"],[380,"stroke-dashoffset"],[381,"stroke-linecap"],[382,"stroke-linejoin"],[383,"stroke-miterlimit"],[384,"stroke-opacity"],[385,"stroke-width"],[127,"tab-size"],[126,"table-layout"],[128,"text-align"],[404,"text-align-last"],[392,"text-anchor"],[509,"text-combine-upright"],[129,"text-decoration"],[403,"text-decoration-color"],[401,"text-decoration-line"],[546,"text-decoration-skip"],[402,"text-decoration-style"],[130,"text-indent"],[441,"text-justify"],[131,"text-line-through"],[132,"text-line-through-color"],[133,"text-line-through-mode"],[134,"text-line-through-style"],[135,"text-line-through-width"],[510,"text-orientation"],[136,"text-overflow"],[137,"text-overline"],[138,"text-overline-color"],[139,"text-overline-mode"],[140,"text-overline-style"],[141,"text-overline-width"],[11,"text-rendering"],[142,"text-shadow"],[536,"text-size-adjust"],[143,"text-transform"],[144,"text-underline"],[145,"text-underline-color"],[146,"text-underline-mode"],[405,"text-underline-position"],[147,"text-underline-style"],[148,"text-underline-width"],[149,"top"],[421,"touch-action"],[442,"touch-action-delay"],[446,"transform"],[559,"transform-box"],[447,"transform-origin"],[448,"transform-style"],[150,"transition"],[151,"transition-delay"],[152,"transition-duration"],[153,"transition-property"],[154,"transition-timing-function"],[504,"translate"],[155,"unicode-bidi"],[156,"unicode-range"],[539,"user-select"],[409,"user-zoom"],[515,"variable"],[393,"vector-effect"],[157,"vertical-align"],[158,"visibility"],[168,"webkit-animation-direction"],[354,"webkit-app-region"],[412,"webkit-app-region"],[175,"webkit-appearance"],[176,"webkit-aspect-ratio"],[400,"webkit-background-blend-mode"],[178,"webkit-background-clip"],[179,"webkit-background-composite"],[180,"webkit-background-origin"],[399,"webkit-blend-mode"],[182,"webkit-border-after"],[183,"webkit-border-after-color"],[184,"webkit-border-after-style"],[185,"webkit-border-after-width"],[186,"webkit-border-before"],[187,"webkit-border-before-color"],[188,"webkit-border-before-style"],[189,"webkit-border-before-width"],[190,"webkit-border-end"],[191,"webkit-border-end-color"],[192,"webkit-border-end-style"],[193,"webkit-border-end-width"],[194,"webkit-border-fit"],[195,"webkit-border-horizontal-spacing"],[196,"webkit-border-image"],[198,"webkit-border-start"],[199,"webkit-border-start-color"],[200,"webkit-border-start-style"],[201,"webkit-border-start-width"],[202,"webkit-border-vertical-spacing"],[203,"webkit-box-align"],[228,"webkit-box-decoration-break"],[414,"webkit-box-decoration-break"],[204,"webkit-box-direction"],[205,"webkit-box-flex"],[206,"webkit-box-flex-group"],[207,"webkit-box-lines"],[208,"webkit-box-ordinal-group"],[209,"webkit-box-orient"],[210,"webkit-box-pack"],[211,"webkit-box-reflect"],[73,"webkit-clip-path"],[213,"webkit-color-correction"],[214,"webkit-column-axis"],[215,"webkit-column-break-after"],[216,"webkit-column-break-before"],[217,"webkit-column-break-inside"],[220,"webkit-column-progression"],[396,"webkit-cursor-visibility"],[410,"webkit-dashboard-region"],[229,"webkit-filter"],[413,"webkit-filter"],[341,"webkit-flow-from"],[340,"webkit-flow-into"],[12,"webkit-font-feature-settings"],[241,"webkit-font-size-delta"],[14,"webkit-font-smoothing"],[251,"webkit-highlight"],[252,"webkit-hyphenate-character"],[253,"webkit-hyphenate-limit-after"],[254,"webkit-hyphenate-limit-before"],[255,"webkit-hyphenate-limit-lines"],[256,"webkit-hyphens"],[258,"webkit-line-align"],[257,"webkit-line-box-contain"],[259,"webkit-line-break"],[260,"webkit-line-clamp"],[261,"webkit-line-grid"],[262,"webkit-line-snap"],[16,"webkit-locale"],[264,"webkit-logical-height"],[263,"webkit-logical-width"],[270,"webkit-margin-after"],[265,"webkit-margin-after-collapse"],[271,"webkit-margin-before"],[266,"webkit-margin-before-collapse"],[267,"webkit-margin-bottom-collapse"],[269,"webkit-margin-collapse"],[272,"webkit-margin-end"],[273,"webkit-margin-start"],[268,"webkit-margin-top-collapse"],[274,"webkit-marquee"],[275,"webkit-marquee-direction"],[276,"webkit-marquee-increment"],[277,"webkit-marquee-repetition"],[278,"webkit-marquee-speed"],[279,"webkit-marquee-style"],[280,"webkit-mask"],[281,"webkit-mask-box-image"],[282,"webkit-mask-box-image-outset"],[283,"webkit-mask-box-image-repeat"],[284,"webkit-mask-box-image-slice"],[285,"webkit-mask-box-image-source"],[286,"webkit-mask-box-image-width"],[287,"webkit-mask-clip"],[288,"webkit-mask-composite"],[289,"webkit-mask-image"],[290,"webkit-mask-origin"],[291,"webkit-mask-position"],[292,"webkit-mask-position-x"],[293,"webkit-mask-position-y"],[294,"webkit-mask-repeat"],[295,"webkit-mask-repeat-x"],[296,"webkit-mask-repeat-y"],[297,"webkit-mask-size"],[299,"webkit-max-logical-height"],[298,"webkit-max-logical-width"],[301,"webkit-min-logical-height"],[300,"webkit-min-logical-width"],[302,"webkit-nbsp-mode"],[411,"webkit-overflow-scrolling"],[304,"webkit-padding-after"],[305,"webkit-padding-before"],[306,"webkit-padding-end"],[307,"webkit-padding-start"],[310,"webkit-perspective-origin-x"],[311,"webkit-perspective-origin-y"],[312,"webkit-print-color-adjust"],[343,"webkit-region-break-after"],[344,"webkit-region-break-before"],[345,"webkit-region-break-inside"],[342,"webkit-region-fragment"],[313,"webkit-rtl-ordering"],[314,"webkit-ruby-position"],[395,"webkit-svg-shadow"],[353,"webkit-tap-highlight-color"],[415,"webkit-tap-highlight-color"],[315,"webkit-text-combine"],[316,"webkit-text-decorations-in-effect"],[317,"webkit-text-emphasis"],[318,"webkit-text-emphasis-color"],[319,"webkit-text-emphasis-position"],[320,"webkit-text-emphasis-style"],[321,"webkit-text-fill-color"],[17,"webkit-text-orientation"],[322,"webkit-text-security"],[323,"webkit-text-stroke"],[324,"webkit-text-stroke-color"],[325,"webkit-text-stroke-width"],[328,"webkit-transform-origin-x"],[329,"webkit-transform-origin-y"],[330,"webkit-transform-origin-z"],[337,"webkit-user-drag"],[338,"webkit-user-modify"],[339,"webkit-user-select"],[352,"webkit-wrap"],[350,"webkit-wrap-flow"],[351,"webkit-wrap-through"],[18,"webkit-writing-mode"],[159,"white-space"],[160,"widows"],[161,"width"],[445,"will-change"],[162,"word-break"],[163,"word-spacing"],[164,"word-wrap"],[394,"writing-mode"],[461,"x"],[462,"y"],[165,"z-index"],[19,"zoom"]]; document.body.classList.remove('loading'); window.addEventListener('popstate', function(e) { if (e.state) { timeline.selectedBucketId = e.state.id; } }); }); </script> <script> /*! (c) 2017 Copyright (c) 2016 The Google Inc. All rights reserved. (Apache2) */ "use strict";!function(e){function r(){return caches.keys().then(function(e){var r=0;return Promise.all(e.map(function(e){if(e.includes("sw-precache"))return caches.open(e).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){return e.match(n).then(function(e){return e.arrayBuffer()}).then(function(e){r+=e.byteLength})}))})})})).then(function(){return r})["catch"](function(){})})}function n(){"serviceWorker"in navigator&&navigator.serviceWorker.register("/service-worker.js").then(function(e){e.onupdatefound=function(){var n=e.installing;n.onstatechange=function(){switch(n.state){case"installed":t&&!navigator.serviceWorker.controller&&o.then(r().then(function(e){var r=Math.round(e/1e3);console.info("[ServiceWorker] precached",r,"KB");var n=new Metric("sw_precache");n.sendToAnalytics("service worker","precache size",e),t.showMessage("This site is cached ("+r+"KB). Ready to use offline!")}));break;case"redundant":throw Error("The installing service worker became redundant.")}}}})["catch"](function(e){console.error("Error during service worker registration:",e)})}var t=document.querySelector("chromedash-toast"),o=new Promise(function(e,r){return window.asyncImportsLoadPromise?window.asyncImportsLoadPromise.then(e,r):void e()});window.asyncImportsLoadPromise||n(),navigator.serviceWorker&&navigator.serviceWorker.controller&&(navigator.serviceWorker.controller.onstatechange=function(e){if("redundant"===e.target.state){var r=function(){window.location.reload()};t?o.then(function(){t.showMessage("A new version of this app is available.","Refresh",r,-1)}):r()}}),e.registerServiceWorker=n}(window); // https://gist.github.com/ebidel/1d5ede1e35b6f426a2a7 function lazyLoadWCPolyfillsIfNecessary() { function onload() { // For native Imports, manually fire WCR so user code // can use the same code path for native and polyfill'd imports. if (!('HTMLImports' in window)) { document.body.dispatchEvent( new CustomEvent('WebComponentsReady', {bubbles: true})); } } var webComponentsSupported = ('registerElement' in document && 'import' in document.createElement('link') && 'content' in document.createElement('template')); if (!webComponentsSupported) { var script = document.createElement('script'); script.async = true; script.src = '/static/bower_components/webcomponentsjs/webcomponents-lite.min.js'; script.onload = onload; document.head.appendChild(script); } else { onload(); } } var button = document.querySelector('app-header paper-menu-button'); button.addEventListener('click', function lazyHandler(e) { this.removeEventListener('click', lazyHandler); var url = '/static/elements/paper-menu-button.vulcanize.html'; Polymer.Base.importHref(url, function() { button.contentElement.hidden = false; button.open(); }, null, true); }); // Google Analytics (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-39048143-1', 'auto'); ga('send', 'pageview'); // End Google Analytics lazyLoadWCPolyfillsIfNecessary(); </script> </body> </html>
ceddl
Customer experience digital data layer polyfill. Bridging the gap between the ceddl spec's and the browsers
krishnakumarsingh
Setting Up an Angular 2 Environment Using Typescript, Npm and Webpack PreviousNext This Angular 2 tutorial serves for anyone looking to get up and running with Angular 2 and TypeScript fast. Angular 2 Beta Udemy Last week I’ve read the great Angular 2 book from Ninja Squad. Therefore, I figured it was time to put pen to paper and start building Angular 2 applications using TypeScript. That’s why in this tutorial, we’ll learn how to start an Angular 2 project from scratch and go further by building a development environment with Webpack and more. Getting Started 1. Developing and Building a TypeScript App Let’s start by building our first Angular 2 application using Typescript. First, make sure you have Node.js and npm installed. You can refer to the official website for more information about the installation procedure. Then, install Typescript globally via npm by running the following command in your terminal : 1 2 3 npm install -g typescript Once it is installed, we’ll setup our Typescript project by creating a tsconfig.json file in which we specify the compilation options to use for compiling our project. The typescript NPM module we just installed comes with a compiler, named tsc, that we are going to use for initializing a fresh Typescript project : 1 2 3 4 5 6 7 # Create a new project folder and go inside it mkdir angular2-starter && cd angular2-starter # Generate the Typescript configurations file tsc --init --target es5 --sourceMap --experimentalDecorators --emitDecoratorMetadata Running tsc --init create the tsconfig.json in our project directory, which looks like this : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 { "compilerOptions": { "target": "es5", "sourceMap": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, "module": "commonjs", "noImplicitAny": false, "outDir": "built" }, "exclude": [ "node_modules" ] } Along with the --init parameter, we passed the following options to the compiler : --target es5 : specify that we want our code to transpile to ECMASCRIPT 5. Thus, it could be run in every browser. --sourceMap : generate source maps files. It helps when debugging ES5 code with the original Typescript code in the chrome devtools. --experimentalDecorators and --emitDecoratorMetadata : allow to use Typescript with decorators. Also notice that options such as module, outDir or rootDir have been added by default. Feel free to read the documentation for more compiler options. So hit npm init in your terminal, and fill in some answers (you can accept the default for all the prompts). Then, install angular2 by running the following command : 1 2 3 npm install --save angular2 You should now have a package.json file that looks like the following: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 { "name": "angular-starter", "version": "1.0.0", "description": "An Angular 2 Starter kit featuring Angular 2, TypeScript, and Webpack by EloquentWebApp", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Grégory D'Angelo", "license": "ISC", "dependencies": { "angular2": "^2.0.0-beta.17", "es6-shim": "^0.35.1", "reflect-metadata": "^0.1.2", "rxjs": "^5.0.0-beta.6", "zone.js": "^0.6.17" } } As you can see, angular2 comes with the following dependencies : reflect-metadata : used to enable dependency injection through decorators es6-shim and es6-promise : librairies for ES6 compatabilities and support for ES6 Promise rxjs : a set of librairies for reactive programming zone.js : used to implement zones for Javascript, inspired from Dart. Angular 2 uses it to efficiently detect changes The fundamentals settings are now in place. Let’s create our first Angular 2 application. 2. Creating our First Component The first step is to create a Typescript file at the root folder, and name it app.component.ts. Our application itself will be a component. To do so, we’ll use the @Component decorator by importing it from ‘angular2/core‘. That’s all we need to create our Angular 2 component. 1 2 3 4 5 6 import { Component } from 'angular2/core'; @Component() export class AppComponent { } By prefixing the class by this decorator, it tells Angular that this class is an Angular component. In Angular 2, components are a fundamental concept. It is the way we define views and control the logic on the page. Here’s how to do it : 1 2 3 4 5 6 7 8 9 import { Component } from 'angular2/core'; @Component({ selector: 'app', template: '<h1>Hello, Angular2</h1>' }) export class AppComponent { } We passed in a configuration object to the component decorator. This object has two properties : selector and template. The selector is the HTML element that Angular will looking for. Every times it founds one, Angular will instantiate a new instance of our AppComponent class, and place our template. As you may also notice we export our class at the end. This is our first class so we’ll keep it empty for simplicity. 3. Bootstrapping the App Finally, we need to launch our application. For this, we only need two things : the Angular’s browser bootstrap method, and the application root component that we just wrote. To separate the concerns, create a new file, bootstrap.ts, and import the dependencies : 1 2 3 4 5 6 7 8 9 ///<reference path="node_modules/angular2/typings/browser.d.ts" /> import { bootstrap } from 'angular2/platform/browser'; import { AppComponent } from './app.component'; bootstrap(AppComponent) .catch(err => console.log(err)); As you can see, we call the bootstrap method, passing in our component, AppComponent. Moreover, as stated in the CHANGELOG since 2.0.0-beta.6 (2016-02-11) we may need to add the <reference ... /> line at the top of our bootstrap.ts file when using --target=es5. Feel free to check the CHANGELOG for more details. Last but not least, we need to create an index.html file to host our Angular application. Start by pasting the following lines : 1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html> <html> <head></head> <body> <app>Loading...</app> </body> </html> For now, it’s a very basic HTML file in which we’ve put the selector <app> that corresponds to our application root component. But we need to add 2 more things in order to launch our application. Indeed, we need to rely on a tool to load application and library modules. For now, we’ll use SystemJS as the module loader. We’ll see later in this tutorial how to install and configure Webpack for our Angular 2 project. And finally, we need to include script dependencies in our HTML file. Let’s do it together step by step. First, start by installing SystemJS : 1 2 3 npm install --save systemjs Then, load it statically in the index.html just after angular2-polyfills. angular2-polyfills is essentially a mashup of zone.js and reflect-metadata. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <head> <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/systemjs/dist/system.js"></script> </head> <body> <app>Loading...</app> </body> </html> Finally, we need to tell SystemJS where is our bootstrap module and where to find the dependencies used in our application (angular2 and rxjs) : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!DOCTYPE html> <html> <head> <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/systemjs/dist/system.js"></script> <script> System.config({ // we want to import modules without writing .js at the end defaultJSExtensions: true, // the app will need the following dependencies map: { 'angular2': 'node_modules/angular2', 'rxjs': 'node_modules/rxjs' } }); // and to finish, let's boot the app! System.import('built/bootstrap'); </script> </head> <body> <app>Loading...</app> </body> </html> OK! We’re done with the settings and we can now compile and run our application. In order to handle common tasks, include the following npm scripts in the package.json file : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 { "name": "angular-starter", "version": "1.0.0", "description": "An Angular 2 Starter kit featuring Angular 2, TypeScript, and Webpack by EloquentWebApp", "main": "index.js", "scripts": { "start": "concurrently \"npm run watch\" \"npm run serve\"", "watch": "tsc -w", "serve": "lite-server" }, "author": "Grégory D'Angelo", "license": "ISC", "dependencies": { "angular2": "^2.0.0-beta.11", "es6-promise": "^3.1.2", "es6-shim": "^0.35.0", "reflect-metadata": "^0.1.2", "rxjs": "^5.0.0-beta.2", "systemjs": "^0.19.24", "zone.js": "^0.6.5" }, "devDependencies": { "concurrently": "^2.2.0", "lite-server": "^2.2.2" } } The watch script runs the TypeScript compiler in watch mode. It watches TypeScript files and triggers recompilation on changes. The serve script runs an HTTP server to serve our application, and refresh the browser on changes. I’ve used lite-server for that purpose. Install it via npm : 1 2 3 npm install --save-dev lite-server And, the start run the previous 2 scripts concurrently using the concurrently npm package : 1 2 3 npm install --save-dev concurrently So, run npm start and open your browser to http://localhost:3000. You should now briefly see “Loading…”, and then “Hello, Angular2” should appear. Congratulations! We’ve have just finished the first part of this tutorial. Keep going to see how to set a build system using Webpack for working with TypeScript. Creating a useful project structure and toolchain 1. Project Structure As far, we’ve built a basic Angular 2 application with the minimum required dependencies and tools. In this section, we’ll refactor our project structure to ease the development of more complex Angular 2 applications. By the end of this section, you will be able to build your own starter kit to get up and running with Angular 2 and TypeScript fast. More importantly, you will understand how to structure your project and what each tool is responsible for. Sounds great, isn’t it? Let’s do it! The first step is to revamp the file structure of our project. Here’s how it will look : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 angular2-starter/ ├──src/ | ├──bootstrap.ts | ├──index.html | ├──polyfills.ts │ │ │ ├──app/ │ │ ├──app.component.ts │ │ └──app.html │ │ │ └──assets/ │ └──css/ │ └──styles.css │ ├──tsconfig.json ├──typings.json ├──package.json │ └──webpack.config.js There are some new files, but don’t worry we will dive into each one of them through this section. What’s important for now, it’s to understand that we’ll use the component approach in our application project. This is a great way to ensure maintainable code by encapsulation of our behavior logic. Hence, each component will live in a single folder with each concern as a file: style, template, specs, e2e, and component class. Before going further let’s reorganize our files as follow : 1 2 3 4 5 6 7 8 9 10 11 12 angular2-starter/ ├──src/ | ├──bootstrap.ts | ├──index.html │ │ │ └──app/ │ └──app.component.ts │ ├──tsconfig.json └──package.json You should also update the path in bootstrap.ts : 1 2 3 4 5 6 7 8 9 ///<reference path="../node_modules/angular2/typings/browser.d.ts" /> import { bootstrap } from 'angular2/platform/browser'; import { AppComponent } from './app/app.component'; bootstrap(AppComponent) .catch(err => console.log(err)); Great! Now it’s time to dive in into Webpack. 2. Installing and Configuring Webpack Webpack will replace SystemJS that we have used until now, as a module loader. If you need an explanation on what is Webpack for, I highly recommand you to take a look at the official documentation. In short, webpack is a module bundler. “It takes modules with dependencies and generates static assets representing those modules“. Start with installing webpack, webpack-dev-server, and the webpack plugins locally, and save them as project dependencies : 1 2 3 4 5 6 7 8 9 10 # First, remove SystemJS. We don't need it anymore. npm uninstall --save systemjs # Then, install Typescript locally npm install --save typescript # Finally, install webpack npm install --save-dev webpack webpack-dev-server html-webpack-plugin copy-webpack-plugin Now, let’s configure Webpack for our development workflow. For this purpose we’ll create a webpack.config.js. Add the following settings in your config file : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 var path = require('path'); var webpack = require('webpack'); var CopyWebpackPlugin = require('copy-webpack-plugin'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var ENV = process.env.ENV = 'development'; var HOST = process.env.HOST || 'localhost'; var PORT = process.env.PORT || 8080; var metadata = { host: HOST, port: PORT, ENV: ENV }; /* * config */ module.exports = { // static data for index.html metadata: metadata, // Emit SourceMap to enhance debugging devtool: 'source-map', devServer: { // This is required for webpack-dev-server. The path should // be an absolute path to your build destination. outputPath: path.join(__dirname, 'dist') }, // Switch loaders to debug mode debug: true, // Our angular app entry: { 'polyfills': path.resolve(__dirname, "src/polyfills.ts"), 'app': path.resolve(__dirname, "src/bootstrap.ts") }, // Config for our build file output: { path: path.resolve(__dirname, "dist"), filename: '[name].bundle.js', sourcemapFilename: '[name].map' }, resolve: { // Add `.ts` and `.tsx` as a resolvable extension. extensions: ['', '.ts', '.tsx', '.js'] }, module: { loaders: [ // Support for .ts files { test: /\.tsx?$/, loader: 'ts-loader', include: [ path.resolve(__dirname, "./src") ] }, // Support for .html as raw text { test: /\.html$/, loader: 'raw-loader', exclude: [ path.resolve(__dirname, "src/index.html") ] } ] }, plugins: [ // Copy static assets to the build folder new CopyWebpackPlugin([{ from: 'src/assets', to: 'assets' }]), // Generate the index.html new HtmlWebpackPlugin({ template: 'src/index.html' }) ] } The entry specifies the entry files of our Angular application. It will be use by Webpack as the starting point for the bundling process. As you may notice we specify our bootstrap file, but also a new file named polyfills.ts. It will contain all the dependencies needed to run our Angular2 application. Before that, we’ve put those deps directly inside our index.html. They now live in a separate file : 1 2 3 4 5 // polyfills.ts import 'angular2/bundles/angular2-polyfills'; import 'rxjs'; The output tells Webpack what to do after completing the bundling process. In our case, the dist/ directory will be use to output the bundled files named app.bundle.js and polyfills.bundle.js with th following source-map files. The ts-loader is used to transpile our Typescript files that match the defined test regex. In our case it will process all files with a .ts or .tsx extension. The raw-loader is used to support html files as raw text. Hence, we could write our component views in separate files and include them afterward in our components. You need to install them using npm : 1 2 3 npm install --save-dev ts-loader raw-loader The CopyWebpackPlugin is used to copy the static assets into the build folder. Finally, the metadata are used by the HtmlWebpackplugin to generate our index.html file. In the index.html, we use the host and port data to run the webpack dev server in development environment. See how this file has been simplified : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="./assets/css/styles.css" /> </head> <body> <app>Loading...</app> </body> <% if (webpackConfig.metadata.ENV === 'development') { %> <!-- Webpack Dev Server --> <script src="http://<%= webpackConfig.metadata.host %>:<%= webpackConfig.metadata.port %>/webpack-dev-server.js"></script> <% } %> </html> Feel free to add you own stylesheets files under /src/assets/css as I did with my styles.css file. You should now have a project structured like so : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 angular2-starter/ ├──src/ | ├──bootstrap.ts | ├──index.html | ├──polyfills.ts │ │ │ ├──app/ │ │ └──app.component.ts │ │ │ └──assets/ │ └──css/ │ └──styles.css │ ├──tsconfig.json ├──package.json │ └──webpack.config.js We need one more thing to be all set up. As mentionned before, we will write the views in separated file. So, create an app.html file and refer to it in your app.components.ts. 1 2 3 4 <!-- app.html --> <h1>Hello, Angular2</h1> 1 2 3 4 5 6 7 8 9 10 // app.component.ts import { Component } from 'angular2/core'; @Component({ selector: 'app', template: require('./app.html') }) export class AppComponent { } Finally, we have to install the node typings definition to be able to require file inside our component as we did for the view. Hence, to do so run the following commands, and complete the tsconfig.json to exclude some files : 1 2 3 4 5 6 7 8 9 10 # Install Typings CLI utility npm install typings --global # Init the typings.json typings init # Install typings typings install env~node --global --save As you can notice in my tsconfig.json file below, there are some extra options that are Atom IDE specific features. Feel free to read the documentation about it: atom-typescript/tsconfig.json. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 { "compilerOptions": { "target": "es5", "sourceMap": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, "module": "commonjs", "noImplicitAny": false, "outDir": "built", "rootDir": "." }, "exclude": [ "node_modules", "typings/main.d.ts", "typings/main" ], "filesGlob": [ "./src/**/*.ts", "!./node_modules/**/*.ts", "typings/browser.d.ts" ], "compileOnSave": false, "buildOnSave": false } If you want to know more about typings read the following pages on Github : Microsoft/TypeScript and typings/typings. Ok! Now it’s time to build and run our application using Webpack. Let’s create some npm scripts to handle those operations. 3. Using npm as a Task Runner We will simply use npm to define and run our tasks : one for the build process, and one for running the development server. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 { "name": "angular2-starter", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build:dev": "webpack --progress --colors", "server:dev": "webpack-dev-server --hot --progress --colors --content-base dist/", "start": "npm run server:dev" }, ... } We can now run npm start and visit http://localhost:8080 to see our app running.
rgeraldporter
A polyfill to add support in Javascript for converting a base64 dataURL to a binary-long-object (BLOB).
rahulvanmali21
Javascript Utilities functions , Custom implementation of Data Structure and polyfills
anseki
Polyfill for plain SVG as Data URI scheme.
Rudxain
polykill archive
Forces use of polyfill in IE 11 since IE 11's native one causes XML data issues
collabsoft-net
Atlassian Connect Polyfill, a utility plugin used by other apps to achieve feature parity between Atlassian Data Center and Atlassian Cloud
ceddl
This is a TodoMVC Implementation example of ceddl-polyfill with angular. It demonstrates how you could use templating and ceddl data model to create a web frontend datalayer.
yume-chan
Polyfill for `DataView#getBigInt64`, `DataView#getBigUint64`, `DataView#setBigInt64` and `DataView#setBigUint64`.
MatthewBacalakis
FormData polyfill implementing entries and append for use in unit tests
Polyfill for EmberData Package Imports (RFC 395)
sumodhnair19
How Data structure can be implemented using JS, Polyfills
ceddl
This is a TodoMVC Implementation example of ceddl-polyfill with react. It demonstrates how you could use templating and ceddl data model to create a web frontend datalayer.
Polyfill written in Typescript for Ecmascript 6 new data structure such as Map,Set,WeakMap,WeakSet
digitalclubb
User timing API polyfill with reporting of RUM data to Google Analytics.
prachi09051999
Implementation of some data structures like Stacks, some methods like debounce and some Polyfills
ceddl
This is a TodoMVC Implementation example of ceddl-polyfill with Vue. It demonstrates how you could use templating and ceddl data model to create a web frontend datalayer.