-
Notifications
You must be signed in to change notification settings - Fork 0
/
mindjet.js
134 lines (119 loc) · 6.2 KB
/
mindjet.js
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
var secondsPass = 0;
var howManyChiclet = 0;
$(function () {
myChart = $('#container').highcharts({
chart: {
type: 'gauge',
alignTicks: false,
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
backgroundColor: null
},
title: {
text: 'Page Load Time'
},
pane: {
startAngle: -150,
endAngle: 150
},
yAxis: [{
min: 0,
max: 20,
tickPosition: 'outside',
lineColor: '#C93682',
lineWidth: 2,
minorTickPosition: 'outside',
tickColor: '#C93682',
minorTickColor: '#C93682',
tickLength: 5,
minorTickLength: 5,
labels: {
distance: 5,
rotation: 'auto'
},
offset: -20,
endOnTick: false
}],
series: [{
name: 'Speed',
data: [16.08],
dataLabels: {
formatter: function () {
var secnds = this.y;
return '<span style="color:#339">'+ secnds + ' seconds</span><br/>';
},
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#dedede']//,
//[1, '#ccc']
]
}
},
tooltip: {
valueSuffix: ' seconds'
}
}]
},
// onchartload
function (chart) {
// nuttin
});
function draggedToUnicorn( event, ui ) {
var draggable = ui.draggable;
var secondsPass = draggable.attr('data-time');
var eleId = draggable.attr('id') + '';
console.log(eleId + " optimized, saving " + secondsPass + " seconds. ");
var point = Highcharts.charts[0].series[0].points[0];
var pointOrig = point.y;
var cleanVal = (pointOrig - secondsPass);
cleanVal = Math.round(cleanVal * 10) / 10;
point.update(cleanVal);
//$('#speedup').click();
var noteCms = '<h3>Keep it simple silly!</h3>The website was being run an an open-source java CMS called OpenCMS. The java stack added no appreciable value to the site; in fact it slowed it down, as did multiple nested .jsps used to generate each simple Web page.<br><br>By extracting all the HTML, CSS and javaScript content I was able to rebuild the site as simple HTML files running on a simple Apache server. This made developers very happy as they no longer had to code across a database to manage a webpage. <div style="text-align:left;display:block;width:100%;margin-left:30px;margin-right:20px;"><h3 style="font-family:Codystar, sans-serif">Issue: slow CMS/server. <br>Solution: move to Apache. <br>Win: page load time decreased by ' + secondsPass + ' seconds</h3></div>'
var noteHtml = '<h3>HTML Optimizations</h3>Because the code was accessible only through the OpenCMS UI, and only one section of a page could be edited at a time, this led to developers not structuring pages for optimal load speed. <br><br>Once moved out of OpenCMS, the pages could be written in the correct structure for load optimization, with minified js and css, and javascript at the end of the page.<div style="text-align:left;display:block;width:100%;margin-left:30px;margin-right:20px;"><h3 style="font-family:Codystar, sans-serif">Issue: unoptimized HTML. <br>Solution: recode all pages with clean HTML structure<br>Win: page load time decreased by ' + secondsPass + ' seconds</h3></div>';
var noteCdn = '<h3>The Cookie Monster</h3>When a web page is requested, the server will send every cookie with every asset on the same server, which is very noisy.<br><br>I did finds and replaces throughout all the code to move all static images and other assets to a Content Delivery Network.<div style="text-align:left;display:block;width:100%;margin-left:30px;margin-right:20px;"><h3 style="font-family:Codystar, sans-serif">Issue: no CDN. <br>Solution: move assets to a CDN<br>Win: page load time decreased by ' + secondsPass + ' seconds</h3></div>';
var noteApache = '<h3>Apache</h3>Apache has many caching settings, rewrite rules, and other modules that can be customized and tweaked and tuned to perfection. (Such as Keep-alive).<br><br>Using the HTML5 Boilerplate as a reference, I tuned up the Apache settings.<div style="text-align:left;display:block;width:100%;margin-left:30px;margin-right:20px;"><h3 style="font-family:Codystar, sans-serif">Issue: Apache default settings are not necessarily fast. <br>Solution: tune up Apache<br>Win: page load time decreased by ' + secondsPass + ' seconds</h3></div>';
var noteTracking = '<h3>Too Many Dang Trackers</h3>The Marketing Department had multiple tracking tags form multiple vendors loading on each page, slowing down the page load.<br><br>I worked with <a href="http://www.tealium.com">Tealium</a> to install a tracking tag management GUI and CDN to mitigate this problem.<div style="text-align:left;display:block;width:100%;margin-left:30px;margin-right:20px;"><h3 style="font-family:Codystar, sans-serif">Issue: Lots of slow javascript from too many trackers <br>Solution: Tealium tracking tag CDN<br>Win: page load time decreased by ' + secondsPass + ' seconds</h3></div>';
if(eleId == 'ss-cms'){
$('#fs-cms').show('slow');
$('#notes').html(noteCms);
$('#x').click(function(){$('#notes').hide();});
};
if(eleId == 'ss-html'){
$('#fs-html').show('slow');
$('#notes').html(noteHtml);
};
if(eleId == 'ss-cdn'){
$('#fs-cdn').show('slow');
$('#notes').html(noteCdn);
};
if(eleId == 'ss-apache'){
$('#fs-apache').show('slow');
$('#notes').html(noteApache);
};
if(eleId == 'ss-tracking'){
$('#fs-tracking').show('slow');
$('#notes').html(noteTracking);
};
$(draggable).remove();
howManyChiclet = howManyChiclet +1;
if(howManyChiclet == 5) {alert('You fixed the server and now Google SEO is going through the roof! Great job!');}
}
$('.slowstuff').draggable({
containment: "document",
revert: "invalid",
cursor: "pointer"
});
$('#unicorn').droppable( {
drop: draggedToUnicorn,
hoverClass: "esplode"
});
});