Browser Repaint Performance

To hit 60fps, we sometimes need to go beyond JavaScript as the sole performance bottleneck for our pages and spend more time investigating paint and layout issues – styles might actually be the core cause of our sluggish performance. The H shortcut within the Developer Tools sure comes in handy! DevTools: Visually Re-engineering CSS For …

CSSCSS – A CSS redundancy analyzer that analyzes redundancy.

$ csscss path/to/styles.css path/to/other-styles.css {.contact .content .primary} and {article, #comments} share 5 rules {.profile-picture}, {.screenshot img} and {a.blurb img} share 4 rules {.work h2:first-child, .archive h2:first-child, .missing h2:first-child, .about h2, .contact h2} and {body.home h2} share 4 rules {article.blurb:hover} and {article:hover} share 3 rules CSSCSS will parse any CSS files you give it and let …

aprilFools.css

A tad late, but here it is nonetheless: A collection of user styles that change the default rendering of websites. Perfect way to fool someone on April 1st. Put these CSS definitions into your co-workers css overriding file. They will be applied to every website they visit. They are commented out by default, so make …

How to troll frontend web developers

@media only screen and (min-width: 960px) and (max-width: 970px) { body { -webkit-transform : rotate(180deg); -moz-transform : rotate(180deg); -o-transform : rotate(180deg); transform : rotate(180deg); } } That’ll teach them, constantly resizing their browser windows and what not! — Puh! (via)

Firefox CSS live editing via SublimeText

A lot of editors are scriptable in Python. And Firefox has remote capabilities. So we are building a python library that can be used by editors to interact with Firefox (desktop or mobile). We could for example add JS breakpoints from Vim, or edit the code of the current page from SublimeText. Note that the …

Automatic Text Balancing on the Web for Better Readability

Good proposal by Adobe as this is an actual problem we’re facing in web development right now. Results in better readability and as an extra it also prevents typographic widows The proposed CSS looks like this: h1 { text-wrap: balance; } Balancing Text for better readability → The original article seems to be gone. Link …