Happy Earth Day everyone! Today, I would like to show you how to minify your JavaScript and CSS files. How will this lower your carbon footprint you might ask? Well by making your scripts smaller, you reduce the amount of packets needed to transfer the files to the end users computer. Reduced transfer amount reduces electricity used. Reduced electricity means less coal or natural gas used, meaning less carbon going in to the atmosphere… Ok, so this is kind of a stretch. The amount of electricity you will be saving will be negligible, but in the end, it all adds up to a good cause. The bonus is that it will reduce download times for your customers, allowing your pages to load faster! Ok, let’s get started:
- Make a backup of your existing JavaScript and CSS files. I usually keep mine on the server. Below, you can see that I made a copy of the file, and just added .bak before the extension to show that it is a back up file. You will want to make a backup file, because once you minify your file, it becomes very hard to code. In the case of Javascript files, often the normal variables functions are replaced with simple variable and function names like A, BB, D, etc., (I.E. function doSomething(){} -> function a(){}) making it hard to understand what the variable or function does.
- Next, head on over to http://refresh-sf.com/yui/. This is a fantastic site for minifying code, allowing you to insert your code in plain text, upload a file, or even pull down from an already existing URL. For this case, I am going to just copy and paste the text. There are just a few simple things I want to point out about how to use the compressor.
- On the file type select box, make sure you choose whether you are doing a CSS or JavaScript file.
- Minify only, no symbol obfuscation. – This is what turns the variables and functions of JavaScript files into the simple forms. If you check this, it will make the minified code easier to debug, but will increase the final file size.
- Insert a line breaks after ‘}’ characters. – Does what it says, but increases final file size as well.
- After you having chosen a method of input, hit the compress button, and gracefully receive your minified code. Now, based on the example code I used, it showed a 20% reduction of the file size, but in most cases, this number will be significantly higher.
- Now, copy the code and save it to the original file, upload, and enjoy your slightly faster website!
Another great way to reduce load times is to optimize your jpeg files. A great website for that is http://jpeg-optimizer.com/
A few weeks ago, I noticed that my desktop masthead animation that I build in Adobe Edge Animate was showing up on my mobile theme. This was unacceptable, so I decided to give the what for! Actually, I just had to hide them…
Using Chrome, I turned on my user-agent switcher and set it to IPhone. I then pulled up the page and opened dev tools to see what the problem was:
There the divs where, just floating out in space. If you look at the id, it begins with “eid_” but the tail end of each div id is a timestamp. I had to get a little creative with the CSS to stop the display.
I then had to locate the theme style file. Since my mobile theme was base on WordPress Jetpack, I went to /wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven/styles.css
Using CSS, I used a selector to find each of the divs by the id starting with “eid_”, in this case looking like this:
div[id^="eid_"]{ display:none; } |
I then saved and uploaded back to the server, thus correcting the problem.
I was looking for an interesting design to go in place of a normal company logo for an internal site I was building. I thought a rotating cube would look pretty cool, and the company I work for has a cube for a logo. (note, if you can’t see below, your brower is out of date. Please update it or download Google Chrome)
Spinning Cube
I tweaked the original design from David DeSandro at Github to suit my needs. Please check out his original design as well.
CSS
@-moz-keyframes spinningH { from { -moz-transform: rotateX(0deg) rotateY(0deg); } to{ -moz-transform: rotateX(0deg) rotateY(360deg); } } @-webkit-keyframes spinningH { from { -webkit-transform: rotateX(0deg) rotateY(0deg); } to{ -webkit-transform: rotateX(0deg) rotateY(360deg); } } @-o-keyframes spinningH { from { -o-transform: rotateX(0deg) rotateY(0deg); } to{ -o-transform: rotateX(0deg) rotateY(360deg); } } @-ms-keyframes spinningH { from { -ms-transform: rotateX(0deg) rotateY(0deg); } to{ -ms-transform: rotateX(0deg) rotateY(360deg); } } @keyframes spinningH { from { transform: rotateX(0deg) rotateY(0deg); } to{ transform: rotateX(0deg) rotateY(360deg); } } #cube-container { -webkit-perspective : 1000px; -moz-perspective : 1000px; -o-perspective : 1000px; -ms-perspective : 1000px; perspective : 1000px; -webkit-perspective-origin : 50% 50%; -moz-perspective-origin : 50% 50%; -moz-transform-origin : 50% 50%; -o-perspective-origin : 50% 50%; -ms-perspective-origin : 50% 50%; perspective-origin : 50% 50%; } .animate { -webkit-animation : spinningH 6s infinite linear; -moz-animation : spinningH 6s infinite linear; -o-animation : spinningH 6s infinite linear; -ms-animation : spinningH 6s infinite linear; animation : spinningH 6s infinite linear; } #cube { position: relative; margin: 0 auto; height: 100px; width: 100px; -webkit-transition : -webkit-transform 2s linear; -moz-transition : -moz-transform 2s linear; -o-transition : -o-transform 2s linear; -ms-transition : -ms-transform 2s linear; transition : transform 2s linear; -webkit-transform-style : preserve-3d; -moz-transform-style : preserve-3d; -o-transform-style : preserve-3d; -ms-transform-style : preserve-3d; transform-style : preserve-3d; } #cube>div { position: absolute; height: 100px; width: 100px; padding: 20px; opacity: 0.95; background-position:center center; background: #76c101; /* Old browsers */ background: -moz-linear-gradient(top, #76c101 0%, #39bc01 34%, #00ad1f 69%, #1fa526 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#76c101), color-stop(34%,#39bc01), color-stop(69%,#00ad1f), color-stop(100%,#1fa526)); background: -webkit-linear-gradient(top, #76c101 0%,#39bc01 34%,#00ad1f 69%,#1fa526 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #76c101 0%,#39bc01 34%,#00ad1f 69%,#1fa526 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #76c101 0%,#39bc01 34%,#00ad1f 69%,#1fa526 100%); /* IE10+ */ background: linear-gradient(to bottom, #76c101 0%,#39bc01 34%,#00ad1f 69%,#1fa526 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#76c101', endColorstr='#1fa526',GradientType=0 ); /* IE6-9 */ } #cube div:nth-child(1) { -webkit-transform : translateZ(70px); -moz-transform : translateZ(70px); -o-transform : translateZ(70px); -ms-transform : translateZ(70px); transform : translateZ(70px); background-repeat : no-repeat; } #cube div:nth-child(2) { -webkit-transform : rotateY(90deg) translateZ(70px); -moz-transform : rotateY(90deg) translateZ(70px); -o-transform : rotateY(90deg) translateZ(70px); -ms-transform : rotateY(90deg) translateZ(70px); transform : rotateY(90deg) translateZ(70px); background-repeat : no-repeat; } #cube div:nth-child(3) { -webkit-transform : rotateY(180deg) translateZ(70px); -moz-transform : rotateY(180deg) translateZ(70px); -o-transform : rotateY(180deg) translateZ(70px); -ms-transform : rotateY(180deg) translateZ(70px); transform : rotateY(180deg) translateZ(70px); background-repeat : no-repeat; } #cube div:nth-child(4) { -webkit-transform : rotateY(-90deg) translateZ(70px); -moz-transform : rotateY(-90deg) translateZ(70px); -o-transform : rotateY(-90deg) translateZ(70px); -ms-transform : rotateY(-90deg) translateZ(70px); transform : rotateY(-90deg) translateZ(70px); background-repeat : no-repeat; } #cube div:nth-child(5) { -webkit-transform : rotateX(-90deg) translateZ(70px) rotate(180deg); -moz-transform : rotateX(-90deg) translateZ(70px) rotate(180deg); -o-transform : rotateX(-90deg) translateZ(70px) rotate(180deg); -ms-transform : rotateX(-90deg) translateZ(70px) rotate(180deg); transform : rotateX(-90deg) translateZ(70px) rotate(180deg); background-repeat :no-repeat; } #cube div:nth-child(6) { -webkit-transform : rotateX(90deg) translateZ(70px); -moz-transform : rotateX(90deg) translateZ(70px); -o-transform : rotateX(90deg) translateZ(70px); -ms-transform : rotateX(90deg) translateZ(70px); transform : rotateX(90deg) translateZ(70px); background-repeat :no-repeat; text-align:center; } |
HTML
<div id="cube-container"> <div id="cube" class="animate"> <div><h1>INTERACTIVE<BR/>MARKETING</h1></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> |