MyFonts sells fonts that you can use on your websites directly through @font-face. They are a one-time fee — no subscriptions or recurring payments. Host the files however you would like, there is no third-party to rely on. Not only that, but you can try any font on your site free for 30 days.
The following is a guest post by Matthias Christen and Florian Müller from Ghostlab. Ghostlab is cross-browser cross-device testing software for Mac and PC. One of the things I'm very impressed Ghostlab can do is sync the events from one browser to all the others. Scroll one page, the others you are testing scroll. Click somewhere on one page, that same click happens on the others. I asked them about how the heck it does that when there is …
When you change a CSS properties value, the browser needs to react to your change. Some values change the layout of the page. For instance, a change in width requires the browser to update layout, then "paint" any pixels that have changed, then "composite" them together. That's a lot of work. Some CSS properties can be changed more inexpensively. For instance, a change in background-image doesn't require any layout changes, but does require paint and composite.
Paul Lewis did all the research on which properties do what. A good reference to help you think about what kind of changes you can make that are easy for the browser (thus fast) and what kind of changes are hard (thus slow).
Dave Rupert does an in-depth analysis of his own responsive site to figure out where he's at, identify places to improve, and evaluate the idea going around that responsive design is at fault for bloated websites.
Mark Otto takes us on a tour of the CSS of GitHub.com. So great to read a straight-talking bit like this, warts and all.
This is 90% the same as we do things at CodePen. One major difference is that they combine all their CSS into two files and just serve them on all pages. I suppose that way once you've visited any page of GitHub.com, you've browser-cached all the CSS you'll ever need there. I have tended to go with a global.css for everywhere and a section.css, which leverages browser cache for the bulk of it while keeping the total CSS weight per-page down.
The following is a guest post by Katy Decorah (edited by Jason Morris). Katy was researching CSS columns and how they can work responsively, as there wasn't much information she could find out there on the subject. So, like a hero, she wrote it all up. Here's Katy:
With CSS columns you can create a print-inspired layout with little added markup that can adapt beyond a fixed canvas. A supported browser will make calculations to wrap and balance content …
The following is a guest post by Tobias Günther. Together with his team, Tobias creates Tower, a Git client for Mac. I personally use it every day. Just this week, they released version 2 of Tower, which I was a beta tester for. I'll let him explain all about Tower, why they created it, and what's new in this version.…
I'm probably a bit rare in that I rather enjoyed trying to keep up on the responsive images thing. It's an interesting problem that bred lots of interesting solutions. The whole thing is starting to wrap up now though, now that the official solutions are:
<picture> and friends
<img> with srcset and sizes
The problem is: I don't really get it. I thought the original picturefill was pretty simple. List a bunch of sources with media queries. First one to …