Category Archives: Design

CodeKit is a nice little app for web development which does things like processing LESS into CSS and minifying javascript. It has one feature that is perplexing: “Inject CSS changes without a full reload” It’s in the app’s preferences menu: What it does: When you’re editing a CSS file and have a page that is using that CSS file open in your web browser, CodeKit watches for changes to the file and pushes the new CSS styles into the browser without doing a page reload. I didn’t have to install any plugins into Chrome and I don’t see any in the Extensions manager for chrome, but somehow it works. How is this possible? I do notice that after several CSS tweaks the browser will start to slow down and become unresponsive unless I refresh the page. The Answer? It uses CSSRefresh: http://cssrefresh.frebsite.nl/ Update Looks like CodeKit is now using Live.js (http://www.livejs.com/) instead of CSSRefresh   Found the actual javascript that Codekit is using: (function () { var e = {}, t = {}, n = 0, r = { refreshStylesheets: function () { function i(e) { var t = document.location, n = new RegExp(“^\\.|^/(?!/)|^[\\w]((?!://).)*$|” + t.protocol + “//” + t.host); return e.match(n) } var n = document.getElementsByTagName(“head”)[0], r = document.getElementById(“LPCodeKitLiveTransitionRule”); r && n.removeChild(r); var s = document.styleSheets, o = document.styleSheets.length; for (var u = 0; u < o; u++) { var a = s[u]; if (!a) continue; var f = a.media.mediaText, l = f.search(/print/i); if (l !== -1) continue; var … Continue reading →