Sketch cheatsheet for Cheaters

If you use Cheaters, you may also be the type of person who uses Sketch. If so, you’ll appreciate the addition of a cheatsheet for Sketch Shortcuts, based on the tables provided at Sketch Shortcuts.

To add it, just put the sketch.md file into your cheatsheets directory (or just git pull the latest update if you installed via Git), and add it to your index.html:

<ul id="nav">
	[...]
	<li><a href="cheatsheets/sketch.md">Sketch</a></li>
</ul>

If you’re new to Cheaters, check out the documentation and download it from the project page. I should also note that there’s a new Xcode cheatsheet which was submitted by Thomas Bennett. If you create any custom sheets for common apps, be sure to let me know!

For web nerds: fixed-position element scrolling in WebKit

Since you use Sketch and Cheaters, and you made it this far in the post, you probably work with CSS, too. If that’s not the case, I can only imagine what possessed you to read this far. Either way…

I also fixed a CSS issue in the Cheaters window. This should actually be a separate post for the sake of search engines because it’s a fix I think will be handy to others, but I wouldn’t want any extra traffic…

In the latest versions of WebKit, position: fixed elements occasionally wiggle all over the page during scrolling. I ran into this with Marked, on a couple of web pages, and just noticed it in Cheaters as well. Fortunately, I had figured out the issue a while ago.

As far as I can tell, it happens when a CSS rule triggers the WebKit animation engine (even for 2d transforms). If it doesn’t break anything else on your page, you can fix it with:

body {
  -webkit-transform-origin-y: 0;
  -webkit-perspective: 1000;
}

You should still be able to apply custom transform-origin and perspective properties to more specific elements within the DOM, but having the outer element reset takes care of the issue. I hope that’s useful to somebody…