By
Trevor Burnham |
July 24th 2010 |
Uncategorized |
One annoyance I’ve had as a Rails developer is that when I use Sass, I end up with a bunch of CSS files; when I use CoffeeScript, I end up with a bunch of JavaScript files; and when I rename or delete a Sass or CoffeeScript file, the CSS or JavaScript file is still there, lurking, potentially causing problems. Sure, I can delete these remnants by hand, but that makes refactoring a chore, and one of the most important things an application framework should do is make refactoring easy.
So, I created a gem, Chlorine. It’s very simple: With just 3 lines of configuration, you can say, “I want to delete everything but lib/ and sass/ in my public/stylesheets folder every time I start my server in development” mode. Pretty handy, I’d say. Use with caution, of course.
By
Trevor Burnham |
July 2nd 2010 |
Uncategorized |
If you’re aiming an app at modern, non-IE browsers only, you can now rotate any HTML element an arbitrary number of degrees with a single line of Sass. Just use this handy function.
Now, why not IE? IE has actually had a lot of power for many years, in the form of filters, and it seems like you should be able to transform anything an arbitrary number of degrees using a Matrix Transform. But, I have no idea whether it’s even possible to do that in Sass given a number of degrees. The documentation baffles me. If you can find an example of using IE filters to do rotation to an arbitrary number of degrees (not just multiples of 90), please post a comment about it.
I should also mention the cssSandpaper library, which looks very exciting. You define a -sand-transform CSS property and it translates it to whatever the browser needs. Demo here.
By
Trevor Burnham |
July 1st 2010 |
Uncategorized |
The extensive jQuery API makes it very easy to add and remove elements in the DOM, yet oddly, there’s no straightforward way to ask if a given jQuery element is in the DOM or not. I took the question to Stack Overflow, where I got a fine answer. Now I’ve wrapped that answer in a very short plugin (in fact, it could easily be shortened to 2 lines, but I find the 5-line version more readable), jqIsInDOM.
It adds two new jQuery functions, isInDOM and notInDOM, which do just what you’d expect. For instance, $foo.remove().notInDOM() is always true. Simple, right? I hope you find it useful.
By
Trevor Burnham |
June 20th 2010 |
Uncategorized |
When building web applications in jQuery, it’s common for me to want to do something twice: Once now, and once when some event is triggered. For instance, if I have to do custom layout relative to the window size, I need to do it once in $(document).ready and again in $(window).resize. That’s not so hard; just create a function and add it in both places. But if it’s just 1–2 lines of code, it’s annoying to have to either copy+paste or put that code in a named function.
So I created a simple little jQuery plugin to make my code just a bit more DRY. It adds a function called doAndBind to your jQuery objects. As the name suggests, doAndBind does two things: It executes the given functions right away, and it binds them to the given event. (Note that in jQuery, event functions like click(func) are just wrappers around bind(eventType, func). bind is all you need.) For instance, with this plugin I can say (in CoffeeScript):
$(window).doAndBind 'resize', ->
$('#stickyFooter').css {marginTop: $(window).height() - 100}Ah, sweet syntactic sugar.
The plugin should be capable of handling all of the forms of the bind() function described in the API docs, but please let me know if you encounter any problems. Here’s the download link: jqDoAndBind
By
Trevor Burnham |
June 18th 2010 |
Uncategorized |
I spent an hour today trying to get Raphaël.js to draw straight, solid black lines, 1px thick.
Yes, I am duly embarrassed. But it’s harder than it sounds.
By default, if you draw a 1px line in Raphaël, you get something fuzzy, thick and grey, even when you (superfluously) specify stroke: 'black' and 'stroke-width': 1. It turns out that this is due to SVG’s subpixel precision and anti-aliasing gone awry, and that there are two fixes:
- Shift the line by 0.5px. This is the approach that gRaphaël takes when it draws axes.
- Set the path’s shapeRendering to
'crispEdges'. I discovered this issue, which suggested that it should be the default behavior for Raphaël.
The latter option seems much cleaner to me, so I’m going with it for now. I’m a little wary, though, because why does Dmitry himself use Method #1? And what happens in IE?
