Muscle memory
Fun things I discovered about my muscle memory.
Fun things I discovered about my muscle memory.
At my previous job, we were told not to use partials to clean up our view code, because each rendering of a partial would add around 10ms to the overall response time. After I was told this I did a quick test in my dev environment, but I’d never actually tested the claim on production … until today!
When programming on low-resolution screens,
I like to use 10pt Monaco with antialiasing turned off.
But when switching to my MacBook’s retina display,
I want antialiasing turned back on.
Until now, I would manually comment/uncomment some CSS
in Atom’s styles.less file to change this.
Turns out, you can define
CSS rules based on the current screen resolution.
By adding the following to styles.less,
Atom automatically switches the font and antialiasing settings
as soon as you move the window from one screen to the other:
atom-text-editor {
@media (-webkit-max-device-pixel-ratio: 1), (max-resolution: 150dpi) {
.line {
-webkit-font-smoothing: none;
font-family: Monaco;
font-size: 10;
transform: translateX(1px);
font-style: normal !important;
* {
font-style: normal !important;
}
}
}
}The transform line is there because
Atom will sometimes cut off the first column of pixels
when antialiasing is turned off.
I’m currently trying out Atom as the main tool for my computer job and I wanted to make it more fun, so I added some CSS to make the cursor move smoothly and give the text-selection rounded corners. To try it yourself, click on Stylesheet in the Atom menu and paste this code:
atom-text-editor .cursor {
transition: all 80ms;
}
atom-text-editor .selection {
border-radius: 4px;
transition: all 20ms;
}Now everything is nice and smooth. Yay!
You don’t want things to be complicated. I get it. I am here to help. Don’t worry, it’s all going to be over soon.