From 0aa77c33ad8ae8a6ac5abd30eb0036e576951db3 Mon Sep 17 00:00:00 2001 From: RaphArbuz Date: Wed, 22 Jul 2015 16:37:05 +0200 Subject: [PATCH 1/9] fix typo: deboucing -> debouncing --- lib/metadata/policies.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/metadata/policies.js b/lib/metadata/policies.js index 23083f5..b5a830b 100644 --- a/lib/metadata/policies.js +++ b/lib/metadata/policies.js @@ -150,7 +150,7 @@ var policies = { "DOMaccessesOnScroll": { "tool": "jsExecutionTransformer", "label": "DOM access on scroll", - "message": "

This rule counts the number of DOM-accessing functions calls on a scroll event, such as queries, readings, writings, bindings and jQuery functions.

Two scroll events are triggered quickly, one after the other, and only the second one is analyzed so throttled functions are ignored.

One of the main reasons of a poor scrolling experience is when too much JS is executed on each scroll event. Note that some devices such as smartphones and MacBooks send more scroll events than others.

Reduce the number of DOM accesses inside scroll listeners. Put DOM queries outside them when possible. Use throttling or deboucing.

", + "message": "

This rule counts the number of DOM-accessing functions calls on a scroll event, such as queries, readings, writings, bindings and jQuery functions.

Two scroll events are triggered quickly, one after the other, and only the second one is analyzed so throttled functions are ignored.

One of the main reasons of a poor scrolling experience is when too much JS is executed on each scroll event. Note that some devices such as smartphones and MacBooks send more scroll events than others.

Reduce the number of DOM accesses inside scroll listeners. Put DOM queries outside them when possible. Use throttling or debouncing.

", "isOkThreshold": 1, "isBadThreshold": 12, "isAbnormalThreshold": 25, From 01676e1f9928126a62ffbd5ef4e8506d9c4798b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Thu, 30 Jul 2015 11:09:34 +0200 Subject: [PATCH 2/9] Fix typo --- lib/metadata/policies.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/metadata/policies.js b/lib/metadata/policies.js index 23083f5..8ad0e20 100644 --- a/lib/metadata/policies.js +++ b/lib/metadata/policies.js @@ -856,7 +856,7 @@ var policies = { "imageOptimization": { "tool": "weightChecker", "label": "Image optimization", - "message": "

This metric mesures the number of bytes that could be saved by optimizing images.

Image optimization is generally one of the easiest way to reduce a page weight, and as a result, the page load time. Don't use Photoshop or other image editing tools, they're not very good for optimization. Use specialized tools such as Kraken.io or the excellent ImageOption on Mac. For SVG images, you can use SVGOMG

The tools in use in YellowLabTools are not set to their maximum optimization power, so you might be able to compress even more!

", + "message": "

This metric mesures the number of bytes that could be saved by optimizing images.

Image optimization is generally one of the easiest way to reduce a page weight, and as a result, the page load time. Don't use Photoshop or other image editing tools, they're not very good for optimization. Use specialized tools such as Kraken.io or the excellent ImageOptim on Mac. For SVG images, you can use SVGOMG

The tools in use in YellowLabTools are not set to their maximum optimization power, so you might be able to compress even more!

", "isOkThreshold": 10240, "isBadThreshold": 122880, "isAbnormalThreshold": 307200, From c8a29b4651d1e4cf2e32e8498996144e49c5d9cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Fri, 31 Jul 2015 16:16:26 +0200 Subject: [PATCH 3/9] Fail the shell scripts if npm or bower fail --- server_config/server_install.sh | 4 ++-- server_config/server_update.sh | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/server_config/server_install.sh b/server_config/server_install.sh index 0166b7d..7355ea5 100644 --- a/server_config/server_install.sh +++ b/server_config/server_install.sh @@ -21,8 +21,8 @@ sudo chown $USER /space cd /space git clone https://github.com/gmetais/YellowLabTools.git --branch master cd YellowLabTools -npm install -bower install --config.interactive=false --allow-root +npm install || exit 1 +bower install --config.interactive=false --allow-root || exit 1 # Front-end compilation grunt build diff --git a/server_config/server_update.sh b/server_config/server_update.sh index 2519d61..0da2289 100755 --- a/server_config/server_update.sh +++ b/server_config/server_update.sh @@ -12,9 +12,9 @@ git stash pop # In case something was added in package.json or bower.json rm -rf node_modules -npm install +npm install || exit 1 rm -rf bower_components -bower install --config.interactive=false --allow-root +bower install --config.interactive=false --allow-root || exit 1 # Front-end compilation rm -rf front/build From 172b8cfb9b0f20fb91eea6b0fbaaf6e39f9cd46f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Fri, 31 Jul 2015 19:41:47 +0200 Subject: [PATCH 4/9] Change ng-click to real links on rule rows --- front/src/css/dashboard.css | 10 +++++++--- front/src/css/timeline.css | 6 ++++-- front/src/less/dashboard.less | 6 +++++- front/src/less/timeline.less | 6 ++++-- front/src/views/dashboard.html | 6 +++--- 5 files changed, 23 insertions(+), 11 deletions(-) diff --git a/front/src/css/dashboard.css b/front/src/css/dashboard.css index ca1c26f..104695f 100644 --- a/front/src/css/dashboard.css +++ b/front/src/css/dashboard.css @@ -109,14 +109,18 @@ .summary .notations .criteria .table { width: 100%; } -.summary .notations .criteria .table > div:hover > div { +.summary .notations .criteria .table > a { + text-decoration: none; + color: inherit; +} +.summary .notations .criteria .table > a:hover > div { background: #EBD8E2; cursor: pointer; } -.summary .notations .criteria .table > div:hover > div.info { +.summary .notations .criteria .table > a:hover > div.info { background: #FFF; } -.summary .notations .criteria .table > div:hover > div.info .icon-question { +.summary .notations .criteria .table > a:hover > div.info .icon-question { color: #EBD8E2; } .summary .notations .criteria .grade { diff --git a/front/src/css/timeline.css b/front/src/css/timeline.css index 9ecf796..5b2c872 100644 --- a/front/src/css/timeline.css +++ b/front/src/css/timeline.css @@ -152,14 +152,16 @@ width: 100%; border-spacing: 0.25em; } -.table > div { +.table > div, +.table > a { display: table-row; } .table > .headers > div { font-weight: bold; padding: 0.5em 1em; } -.table > div > div { +.table > div > div, +.table > a > div { padding: 0.1em 1em; background: #f2f2f2; display: table-cell; diff --git a/front/src/less/dashboard.less b/front/src/less/dashboard.less index 1eeaaa5..b46ed02 100644 --- a/front/src/less/dashboard.less +++ b/front/src/less/dashboard.less @@ -108,7 +108,11 @@ .summary .notations .criteria .table { width: 100%; - > div:hover > div { + > a { + text-decoration: none; + color: inherit; + } + > a:hover > div { background: #EBD8E2; cursor: pointer; &.info { diff --git a/front/src/less/timeline.less b/front/src/less/timeline.less index ab9bd80..d59beac 100644 --- a/front/src/less/timeline.less +++ b/front/src/less/timeline.less @@ -173,7 +173,8 @@ border-spacing: 0.25em; } -.table > div { +.table > div, +.table > a { display: table-row; } @@ -182,7 +183,8 @@ padding: 0.5em 1em; } -.table > div > div { +.table > div > div, +.table > a > div { padding: 0.1em 1em; background: #f2f2f2; display: table-cell; diff --git a/front/src/views/dashboard.html b/front/src/views/dashboard.html index 5efffa0..a7a2191 100644 --- a/front/src/views/dashboard.html +++ b/front/src/views/dashboard.html @@ -28,8 +28,8 @@
{{category.label}}
-
-
+
From f2a933c51b8365095dc646489b83854dcd5e4a45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Sat, 1 Aug 2015 18:44:49 +0200 Subject: [PATCH 5/9] Remove uneeded function --- front/src/js/controllers/dashboardCtrl.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/front/src/js/controllers/dashboardCtrl.js b/front/src/js/controllers/dashboardCtrl.js index 38b3f95..b8f2115 100644 --- a/front/src/js/controllers/dashboardCtrl.js +++ b/front/src/js/controllers/dashboardCtrl.js @@ -30,10 +30,6 @@ dashboardCtrl.controller('DashboardCtrl', ['$scope', '$rootScope', '$routeParams $scope.tweetText = 'I\'ve discovered this cool open-source tool that audits the front-end quality of a web page: '; } - $scope.showRulePage = function(ruleName) { - $location.path('/result/' + $scope.runId + '/rule/' + ruleName); - }; - $scope.testAgain = function() { API.relaunchTest($scope.result); }; From 10693283c52b9102b265de9148d9e6cdde365961 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Sat, 1 Aug 2015 18:51:51 +0200 Subject: [PATCH 6/9] Add license to package.json --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 8a7758a..6da7c3b 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "name": "yellowlabtools", "version": "1.7.3", "description": "Online tool to audit a webpage for performance and front-end quality issues", + "license" : "GPL-2.0", "repository": { "type": "git", "url": "git://github.com/gmetais/YellowLabTools.git" From 8ff565404b98d90706e76986db9763efe422e685 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Sat, 1 Aug 2015 19:22:06 +0200 Subject: [PATCH 7/9] Warn about srcset not being used --- lib/metadata/policies.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/metadata/policies.js b/lib/metadata/policies.js index ad65de3..2ca0489 100644 --- a/lib/metadata/policies.js +++ b/lib/metadata/policies.js @@ -846,7 +846,7 @@ var policies = { "totalWeight": { "tool": "weightChecker", "label": "Total weight", - "message": "

The weight is of course very important if you want the page to load fast. Try to stay under 1MB, which is alreay very long to download over a slow connection.

", + "message": "

The weight is of course very important if you want the page to load fast. Try to stay under 1MB, which is alreay very long to download over a slow connection.

Please note that Yellow Lab Tools' engine (PhantomJS) is not compatible with image srcset, unless you use a polyfill. This can lead to incorrect page weight.

", "isOkThreshold": 716800, "isBadThreshold": 2097152, "isAbnormalThreshold": 3145728, @@ -856,7 +856,7 @@ var policies = { "imageOptimization": { "tool": "weightChecker", "label": "Image optimization", - "message": "

This metric mesures the number of bytes that could be saved by optimizing images.

Image optimization is generally one of the easiest way to reduce a page weight, and as a result, the page load time. Don't use Photoshop or other image editing tools, they're not very good for optimization. Use specialized tools such as Kraken.io or the excellent ImageOptim on Mac. For SVG images, you can use SVGOMG

The tools in use in YellowLabTools are not set to their maximum optimization power, so you might be able to compress even more!

", + "message": "

This metric mesures the number of bytes that could be saved by optimizing images.

Image optimization is generally one of the easiest way to reduce a page weight, and as a result, the page load time. Don't use Photoshop or other image editing tools, they're not very good for optimization. Use specialized tools such as Kraken.io or the excellent ImageOptim on Mac. For SVG images, you can use SVGOMG

The tools in use in YellowLabTools are not set to their maximum optimization power (JPEG quality 85), so you might be able to compress even more!

Please note that Yellow Lab Tools' engine (PhantomJS) is not compatible with image srcset, unless you use a polyfill. This can lead to incorrect page weight.

", "isOkThreshold": 10240, "isBadThreshold": 122880, "isAbnormalThreshold": 307200, From 0574429a9389dd5ac0622e525147b46ef88eacc8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Sat, 1 Aug 2015 19:27:48 +0200 Subject: [PATCH 8/9] Warn about srcset not being used --- lib/metadata/policies.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/metadata/policies.js b/lib/metadata/policies.js index 2ca0489..213cad0 100644 --- a/lib/metadata/policies.js +++ b/lib/metadata/policies.js @@ -846,7 +846,7 @@ var policies = { "totalWeight": { "tool": "weightChecker", "label": "Total weight", - "message": "

The weight is of course very important if you want the page to load fast. Try to stay under 1MB, which is alreay very long to download over a slow connection.

Please note that Yellow Lab Tools' engine (PhantomJS) is not compatible with image srcset, unless you use a polyfill. This can lead to incorrect page weight.

", + "message": "

The weight is of course very important if you want the page to load fast. Try to stay under 1MB, which is alreay very long to download over a slow connection.

Please note that Yellow Lab Tools' engine (PhantomJS) is not compatible with image srcset (unless you use a polyfill). This can lead to incorrect page weight.

", "isOkThreshold": 716800, "isBadThreshold": 2097152, "isAbnormalThreshold": 3145728, @@ -856,7 +856,7 @@ var policies = { "imageOptimization": { "tool": "weightChecker", "label": "Image optimization", - "message": "

This metric mesures the number of bytes that could be saved by optimizing images.

Image optimization is generally one of the easiest way to reduce a page weight, and as a result, the page load time. Don't use Photoshop or other image editing tools, they're not very good for optimization. Use specialized tools such as Kraken.io or the excellent ImageOptim on Mac. For SVG images, you can use SVGOMG

The tools in use in YellowLabTools are not set to their maximum optimization power (JPEG quality 85), so you might be able to compress even more!

Please note that Yellow Lab Tools' engine (PhantomJS) is not compatible with image srcset, unless you use a polyfill. This can lead to incorrect page weight.

", + "message": "

This metric mesures the number of bytes that could be saved by optimizing images.

Image optimization is generally one of the easiest way to reduce a page weight, and as a result, the page load time. Don't use Photoshop or other image editing tools, they're not very good for optimization. Use specialized tools such as Kraken.io or the excellent ImageOptim on Mac. For SVG images, you can use SVGOMG

The tools in use in YellowLabTools are not set to their maximum optimization power (JPEG quality 85), so you might be able to compress even more!

Please note that Yellow Lab Tools' engine (PhantomJS) is not compatible with image srcset (unless you use a polyfill). This can lead to incorrect page weight.

", "isOkThreshold": 10240, "isBadThreshold": 122880, "isAbnormalThreshold": 307200, From eb1c5c07e93ed5b2751dd65afe0d398a6e9eb423 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Sat, 1 Aug 2015 19:30:56 +0200 Subject: [PATCH 9/9] v1.7.4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6da7c3b..3682c0d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "yellowlabtools", - "version": "1.7.3", + "version": "1.7.4", "description": "Online tool to audit a webpage for performance and front-end quality issues", "license" : "GPL-2.0", "repository": {