Tag Archives: codekit

How does CodeKit inject CSS changes without refreshing the browser?

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

Posted in Design, Tech Tips, Web Development | Tagged , , , , , | 1 Comment

Send Folders to CodeKit via the Command Line

If you’re doing some web development with CodeKit and want to be able to send folders to the program via the command line (I was really hoping to do this via Quicksilver), then you can use this little tidbit: open -a /Applications/CodeKit.app “/path/to/your/project” The CodeKit application apparently does not associate itself with being able to open files and so it doesn’t register with folders or files as being an available “Open With” application for opening them. Again I was hoping to do this via a quicksilver action, something like: If it did then quicksilver would stick it in the third pane when using the “Open With” action, wouldn’t that be nice! It is possible to get it into the third pane but you need to have the path to the application in your clipboard (/Applications/CodeKit.app) and then: Select the Folder Choose “Open With” Tab to the third pane and paste the path to the application in. That’s demonstrated in the screenshot above. CodeKit’s not too bad, some aspects seem sluggish and I wish there were more features to customize it – like inclusion and exclusion rules and a finer grained control of which tabs refresh in the browser – also maybe some explanation of their partial CSS injection-on-update feature they have in the preferences.

Posted in Mac, Tech Tips, Web Development | Tagged , , , , | Leave a comment