| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Box Shadow</title> | |
| <style> | |
| .box { | |
| height: 150px; | |
| width: 300px; | |
| margin: 20px; |
| // Updated requestAnimationFrame polyfill that uses new high-resolution timestamp | |
| // | |
| // References: | |
| // http://paulirish.com/2011/requestanimationframe-for-smart-animating/ | |
| // https://gist.github.com/1579671 | |
| // http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision | |
| // | |
| // Note: this is my initial stab at it, *requires additional testing* | |
| (function () { |
| /** | |
| * Example of using an angular provider to build an api service. | |
| * @author Jeremy Elbourn (@jelbourn) | |
| */ | |
| /** Namespace for the application. */ | |
| var app = {}; | |
| /******************************************************************************/ |
| angular.module('myMdl', []).config(['$httpProvider', function($httpProvider) { | |
| $httpProvider.responseInterceptors.push([ | |
| '$q', '$templateCache', 'activeProfile', | |
| function($q, $templateCache, activeProfile) { | |
| // Keep track which HTML templates have already been modified. | |
| var modifiedTemplates = {}; | |
| // Tests if there are any keep/omit attributes. | |
| var HAS_FLAGS_EXP = /data-(keep|omit)/; |
| /** | |
| * testing tasks (using karma to test in the browser). Requires a karma.conf.js for full config | |
| * single-run testing | |
| * continuous testing | |
| */ | |
| /** base deps, but you may need more specifically for your application */ | |
| var gulp = require('gulp'); | |
| var gutil = require('gulp-util'); | |
| var path = require('path'); |
| { | |
| "ignore": [ | |
| "**/deps/**", | |
| "**/node_modules/**", | |
| "**/thirdparty/**", | |
| "**/third_party/**", | |
| "**/vendor/**", | |
| "**/**-min-**", | |
| "**/**-min.**", | |
| "**/**.min.**", |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParentCloudFlare is an awesome reverse cache proxy and CDN that provides DNS, free HTTPS (TLS) support, best-in-class performance settings (gzip, SDCH, HTTP/2, sane Cache-Control and E-Tag headers, etc.), minification, etc.
In this demonstration I will show you how to read data in Angular2 final release before application startup. You can use it to read configuration files like you do in other languages like Java, Python, Ruby, Php.
This is how the demonstration will load data:
a) It will read an env file named 'env.json'. This file indicates what is the current working environment. Options are: 'production' and 'development';
b) It will read a config JSON file based on what is found in env file. If env is "production", the file is 'config.production.json'. If env is "development", the file is 'config.development.json'.
| :root { | |
| --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); | |
| --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); | |
| --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); | |
| --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); | |
| --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); | |
| --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); |
