The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "SVG" Oct 14 - 6:30 PM Eastern
Get a free trial // Grow your CSS skills // Land your dream job

Windows Editors and Shells  

Dave Rupert is switching to Windows in part because the web dev crowd is a little heavy on the Apple, which isn't true, generally, of the user's we build for.

But not only is he switching, he's documenting the important developer-y stuff that he's having to go through in the transition.

Web Font Anti-Patterns  

A series of articles by Bram Stein on typography, performance and modern day best-practices for using fonts. I particularly like what Bram has to say on overusing web fonts:

An­other re­cent trend is us­ing web fonts where they’re not ap­pro­pri­ate. Don’t use web fonts if you don’t need them. They’re not the right an­swer for every­thing. If you find your­self wrap­ping each let­ter or word in a span el­e­ment in or­der to style them — stop. Use SVG.

Most of the times when you’re wrap­ping words and char­ac­ters in span el­e­ments you are ac­tu­ally at­tempt­ing to do let­ter­ing in HTML and CSS. There is a fine line be­tween type and let­ter­ing, and web browsers are not great at the lat­ter. SVG on the other hand is a great fit for let­ter­ing. It’ll give you ab­solute con­trol over kern­ing, track­ing, po­si­tion, gra­di­ents, mask­ing, and colour. As an added bonus, the re­sult­ing SVG file size will be smaller than load­ing sev­eral fonts.

Anselm Hannemann also has a take on webfont loading best practices.

The Tragicomic History of CSS Color Names  

Ever wondered why we have CSS color names like tomato, salmon and darkgoldenrod? Ars Technica on the evolution (and convolution) of the "Named Colors" spec:

Backlash ensued. The color database had been subjected to the whims of so many different programmers that it became deeply disorganized, leading some to argue it had no place in CSS. Critics attacked its naming scheme: “dark gray” was lighter than “gray”; there was a “medium violet red” but no “violet red”; “light goldenrod yellow” had no corresponding “goldenrod yellow.” In total 17 colors had dark versions, but only 13 had light ones. Color distribution was also uneven, skewing toward reds and greens and away from blues.

Nerds having trouble naming things? You don't say.

There are murmurs from the deep about future versions of color naming with a more standardized approach. Where variations like "dark", "light", "deep", or "dull" have specified meaning, and certainly come off the fingers easier than programmatic coloring like rgb or hsl.

The Snowballing of Practice

I really want to be a better musician. Someday, I will be. I know what it takes: practice.

I want to get really good. I want people to hear me play and say to themselves "hey that guy really knows how to play." I want to be able to sit down with other musicians and make things happen. I want to understand music in a lot deeper way than I do now. That's going to take a boatload of practice.

Say the day comes I'm really motivated about this. My life has morphed such that this is my top priority. I'm gonna get good at this. I'm gonna do whatever it takes.

There is a weird barrier in my way. I can't practice eight hours a day. I'm not good enough to practice eight hours a day.


Accelerated Mobile Pages Project

New Google thing, aimed at unsucking the "mobile" web:

The Accelerated Mobile Pages (AMP) Project is an initiative to improve the mobile web and enhance the distribution ecosystem. If content is fast, flexible and beautiful, including compelling and effective ads, we can preserve the open web publishing model as well as the revenue streams so important to the sustainability of quality publishing.


GreenSock MorphSVGPlugin  

Greensock really knocked it out of the park with this one. You know shape morphing? It's a cool effect with loads of uses ranging from practical to artistic. SMIL can do it, but the future of that is in jeopardy. Other JavaScript libraries can do it, but they are bound by the same limitation as SMIL: they need to have the same number of points. This new Greensock plugin isn't bound by that, meaning you could morph an apple into the word apple (!).

Beyond that, you can control what they call the shapeIndex, which controls which point on the previous shape moves to which point on the new shape, which has drastic impact on the way the animation plays out, so you can make it smooth and intuitive rather than awkward and forced. Not to mention that can convert your typically-non-morphable shapes into a morphable shape for you.

They have a collection of examples to check out. You have to be a member of Club GreenSock to use it in production, but you can play with it for free on CodePen. I have a simple template to get you started.

A List Apart Live Panel: The State of Front End Dev  

I'm going to be moderating an online panel (Google Hangouts) on Wednesday, November 4, 2015 with Jina Bolton, Una Kravets, Rebecca Murphey, and Marco Rogers all about front end stuff. We held a little planning and prep session for it the other night and a lot of interesting discussion was had, so I bet y'all will enjoy it.

Creating a CSS Sliding Background Effect

The "trick" of sliding backgrounds in CSS is not new. In fact, the first time I came across it might have been a couple of years ago on the Valio Con site (the current design doesn't have it anymore). I happened to notice it on a couple of new sites I visited today, however, and thought it would be worth sharing.


Sponsor: An Event Apart  

I love An Event Apart conferences, and I bet you would too.

It's where ideas like responsive design and mobile first were launched, and where this year's attendees are already learning how grid layout, CSS shapes, and other advanced techniques will fundamentally change…well, everything.

San Francisco is coming up November 2-4. If you can't make that, they just released the 2016 schedule with cities all over the U.S., including a first-time visit to Nashville and an extra-special Orlando event at Disney.

I have a sneaking suspicion you'll be seeing a bit more of Dave Rupert and I doing things like this.

#141: Getting the Images and Numbers for Responsive Images

You know about responsive images. It's about the image syntax in HTML. If you give it the right information in the right syntax, you can get the browser to download just exactly the right image it needs, without giving it too much or too little image data. It's fantastic for performance.

You know that to get the most out of responsive images you should polyfill it with Picturefill. You download it, you include it on your page.

You have …

Watch Video →

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed