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

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Chronicle Articles

CSS-Tricks Chronicle XIV

I've had the opportunity to be a guest on a couple of podcasts lately. I'm on episode 18 of The Gently Mad podcast with Adam Clark.

I'm also on Authored Content episode 22 (video) with Morten Rand-Hendriksen, James Williamson, and Ray Villalobos.

On both I get the chance to talk about some projects I've worked on both past and present as well as hot topics of the day!

Speaking of podcasts, ShopTalk is going great. We've had some fun episodes lately like with Raquel Velez and Val Head. Also a RAPIDFIRE episode, which there will be more of in the coming months since we air those when Dave or I has to be gone a particular week.

Speaking of ShopTalk, Dave and I did a live ShopTalk show at Front End Design Conference. We typically record "live", but this was our first time in front of a live audience. It was super fun and hopefully we get to do it again sometime. We're hoping there is a good audio recording of it so we can post it as a real show, so it'll come across iTunes n' stuff.

It was the fifth year of the Front End Design Conference and it was just fantastic as always. If you're looking for one to attend, make sure to mark this one down as soon as they announce it next year.

I was stoked to see CodePen used by a number of presenters to show off demos during the conference.

Speaking of CodePen, that's going really well also. We've had some pretty big features roll out lately like using other Pens as resources, including including HTML, and showing errors right in the editor.

We have tons more features and refinements large and small underway so keep coming back for more. We work on it all day every day. In fact the whole CodePen team is at my house for a few weeks for a super code jam.

There has been some good threads in the forums lately like Opinions on CSS Frameworks, Computer for Web Programming, a thread about Macaw, and How big should my background image be?. I like seeing that the opinion threads are alive and well, as well as specific technical stuff getting solved left and right.

You may have noticed a decent amount of guest posts happening here on CSS-Tricks lately. It wasn't planned really, they just kind of happen naturally through conversations I have with people who email in about ideas. If you have an interest in writing a guest post to be published here 1) have an idea that you think is really cool and you really care about 2) do some research / make demos 3) contact me and I'll check it out 4) use this template for creating the article.

I don't have a huge budget but if your article is awesome, takes time, and doesn't benefit you otherwise - I'm sure we can work something out.

CSS-Tricks Chronicle XIII

I'll be speaking at the upcoming Front End Design Conference in Florida. If you have tickets, see you there! If not, sorry, this one is sold out.

I recently spoke at TXJS, and they recorded the talks, so mine and a bunch of others are available on their Vimeo channel.

Next week I head out for Graves Mountain, as I do every year. So this week I'm planning for that, both getting ready for it as well as getting ready to be unplugged for the week.

ShopTalk is going strong! We have lots of great guests lined up. We've recorded a show in advance to air while I'm away at Graves. I'm sure we'll have a show every week for a very long time to come.

Recent shows include Ben Frain, Pam Selle, and Ben Schwarz.

CodePen is going strong as well. The team has made the huge leap of taking it full time. It's been a touch slow, but it's because both Tim and I moved across the country (me to Milwaukee, WI) and we've been settling in a bit. We're also working on big new features. There will be little new stuff coming here and there, but a lot of time has been sunk into big stuff that'll take a bit to get out.

The Patten Rodeo is back as well, in Season Two.

There are also CodePen PENS now, as well as stickers, and get get both if you order a T-Shirt.

Kern and Burn have a book called Conversations With Design Entrepreneurs and there is a bit of an interview with me in there. I got the book and it is super nice. One of the nicest feeling and reading books I have.

I have a few new articles on The Pastry Box Project. One is a story of a person opening a mustard packet and... well just take of that one what you will. The other is the only bit of life advice I have to offer.

I have some ideas burning for new stuff for The Lodge so I'll be launching into that the next few months. Nothing to share yet, but I'll let you know. I also have a nice list cooking for CSS-Tricks v11. It probably won't be a huge redesign, but more re-align-y focusing on enhanced functionality.

CSS-Tricks Chronicle XII

I'm hard at work creating a brand new talk I'm so far calling "CSS is for Computers" that I plan to be giving and refining at some upcoming conferences.

There is a whole new series in The Lodge. Even if you aren't interested in the content of the lodge, but are interested in supporting CSS-Tricks, being a Lodge member is the best way to do that. As a thank you, you now don't see any ads no matter where you are on the site as a logged in Lodge member.

I'm still brainstorming new ideas for more Lodge content. My best idea so far is "Deep Dive" videos where posts/almanac entries/snippets/etc will have optional videos attached to them where the content is explained in more detail. Those videos will only be watchable by Lodge members. Just an idea.

CodePen is humming along! New features for all users include making auto-run JavaScript optional, making the Hire Me button for everybody, editor layout alternatives, and upgrading the editor as a foundation for many more editor improvements. PRO users now have asset hosting.

You'll want to stay tuned to CodePen. Tons more to come.

Lots of great conversations on ShopTalk lately including Brandon Mathis, Alex Sexton, Samantha Warren, and Lara Swanson.

There is a new feature on the ShopTalk website as well. Dave created Time Jump - a JavaScript plugin for deep linking times in podcasts. You can now link to specific times with a query string or hash, like:

To give it a spin, check out this time jump link to a very important question.

If you've never listened to ShopTalk, we also now have a master archives page to help you find episodes you might be interested in checking out.

Also new on ShopTalk, we now have ladies cut T-Shirts in The Store!

My latest Pastry Box Project entry was about introversion. It seemed to resonate pretty strongly with a lot of folks. I did a follow up article on my personal site with some of the reactions and further thoughts.

I'm moving to Milwaukee soon! It took me a while to find a place but eventually being vigilant on Craigslist panned out. Why Milwaukee? I have a bunch of friends there I visit fairly often and I always love it. I grew up in Wisconsin, but never lived in Milwaukee. Heading back to Wisconsin means being closer to family and old friends, which I like. Plus it's a lot less expensive than living in the San Francisco area, and I could use the savings as I'm out on my own trying to build a startup.

Looking forward to checking out Bucketworks and Lounge 42.

You may have noticed I replaced one of the rotating ads on the site with an ad for my tech alma mater Wufoo. I'm happy to have them as an advertiser because of course I still dearly love the product. For those that don't know, it's a very powerful (yet easy to use) online form builder.

You may have also noticed they sponsored the RSS feed for a few weeks there. I'm going to start doing that as there is demand for it. There are around 108,000 RSS readers, so if you want to run an ad in there, get in touch.

The latest edition of Appliness ("the first digital magazine for web application developers") features an interview with me!

CSS-Tricks Chronicle XI

I'm speaking at a few things coming up:

And before that I'll be at LessConf just hanging out.

You may have noticed I stopped cross-posting new episodes of ShopTalk over here. Hopefully nobody thought it was dead because it's going as strong as ever with lots of great episodes lately. I just thought it might have been annoying if you subscribe to both. If you don't — follow @ShopTalkShow on Twitter and/or subscribe in iTunes and you're all set.

The U.S. post office changed their shipping rates this year. So we updated The Store's shipping prices. We charge exactly what it costs us to ship. To the U.S. = $4.90 — Canada is $5.75 — the rest of the world is $11.90.

That goes for the CSS-Tricks store, the CodePen store, and the ShopTalk store.

I'm about half-way through a new series on The Lodge about designing an artist's website from scratch, mobile first, using WordPress as a customized CMS. I'm going to do my dangdest to get it done in March.

Also: the Kickstarter six month subscriptions have expired. I really should have sent out reminders that was coming up, but I didn't. If that was sudden and surprising for you and need a short extension to finish up watching/downloading, please send a note. You can also re-subscribe anytime by logging in and going to the signup page.

I recently attended the second day of W3Conf, and if you didn't notice the flood of blog posts, I liveblogged it. It was a pretty fun way to attend a conference because I had to pay hyper-attention and thus got a lot more out of it than I might have otherwise. Exhausting, though.

We got quite a bit of attention lately for human-readable-izing our Terms of Service and Privacy Policy on CodePen. It's not a totally original idea. I first saw it on 500px. Editorally has a nice one too without the split.

The Almanac has been a long-time not-quite-finished project around here. Most of the pages are done, but there are plenty that are not. I've been plugging away at it still and Estelle Weyl has helped me with some. An offer: if you have any interest in writing up any of the missing pages, get in touch. I'll pay you on a per-page basis to help.

CSS-Tricks Chronicle X

The next conference I'll be at is Webstock. I leave for it in a few weeks. It's in New Zealand, about as far away from home as I can get without going into space. I'm going a week early to check out the area a bit.

I fly straight to In Control after that, in Florida.

The Pastry Box Project has kicked off anew in 2013 with a fresh group including me. Here's my first entry. And here's the fundraiser to turn 2012 into a book.

Lots going on at CodePen!

Lots more coming as well. Several big features under development and a list a mile long for more.

I cleaned up the Bookshelf around here, with my latest greatest recommended reading on front end development and design.

I'm embarrassed to say it took me this long, but I've finished writing all the articles that go with all the videos in The Lodge. There are over 150 videos and that was a lot to write! It almost takes as long to write the descriptions than to shoot the videos.

I've started to record an entire brand new series for The Lodge. More on that soon.

Two free videos have been posted since the last Chronicle. One about GitHub pull requests and the other introducing CodePen PRO. Hoping to shoot one or two new ones in the next few days.

CSS-Tricks Chronicle IX

In the search box on you can now limit searches to just "articles" which has been a long-needed feature. I'm having that return results from the blog, the snippets, or the alamanac - which are all essentially the same format.

I posted the slides yesterday for my talk A Modern Web Designer's Workflow, and today Future Insights released the video of it from Future of Web Design New York.

And here's another version of it from a smaller/longer WordPress focused event.

I was interviewed alongside Dave Rupert in a recent Responsive Design Weekly email.

There is a new ad for Treehouse in the sidebar of the site (lower down on smaller screens). I wanted it to be a fun interactive experience. Treehouse has some new content on using jQuery, so I focused on that. Below the simple advertisement is a bit of jQuery code and a "Run Code" button. You can click the button to run that bit of code on the advertisement. It does different things like affect the markup, add classes, and animate things. It's just to wet your whistle for what jQuery can do and hopefully you'll be enticed to learn more.

I plan to do a tutorial on how it was made since there is some interesting stuff going on there I think.

ShopTalk has being going strong. We've had some great episodes lately. I feel like having Zeldman on in the first year is a pretty big milestone.

We added Disqus comments to all episodes on ShopTalk now, so the conversation can continue after the show is over.

And the biggest ShopTalk news? We have T-Shirts now!

I posted a new video where I answer a bunch of forums posts. Might make a bit of a series about it since it was pretty fun to do.

The RSS subscribers to this site, as reported by FeedBurner, crossed the 100,000 mark for the first time. Gosh I hope FeedBurner doesn't shut down. I'm not sure there is any clean way to update every subscribers subscription URL should that happen.

Facebook likes for this site crossed 10,000.

Speaking of the new video and RSS and stuff, there is a page for all subscription options, should you want to customize what you get from CSS-Tricks.

Random non-web things...

I've been making the jump off iTunes into Rdio and it's awesome. I can't believe I held out for so long.

I've been playing a bit of Guild Wars 2 and it's real fun. Character "Skcirt" (tricks backwards) on Kaineng.

I just finished reading The Night Circus which I enjoyed quite a bit. Started into A Discovery of Witches which is starting out good too (Vampires and Witches in academia!).

CSS-Tricks Chronicle VIII

I catch a plane a week from tomorrow for Honolulu, Hawaii (first time!) where I'll be doing a couple of events. A half-day workshop and a talk (both about workflow) at InControl then another talk at CSS Dev Conf. Lots of prep to do this week.

The whole CodePen team is working super hard lately for a major release. Our biggest yet. Can't share a date yet but it won't be too much longer.

There was no link anywhere on the site (other than buried in blog posts) for the Store. I updated the footer to do a big of a callout for it until I can decide on a better permanent place for it.

That photo is of Sara Cope. She and my friend Camden Sabat took some sweet Merch pics for me. Flickr set:

Someone called me out on a really old crappy WordPress-related article on this site. I was thinking of just taking it down because it really was pretty crappy. But instead, I updated each section of it and refuted my own dumb recommendations.

For the first time, I created an RSS feed for the Gallery. It just outputs titles, full size images, descriptions, and direct links when I have them. Normally I'd FeedBurner a feed like this to save bandwidth and give me metrics on it. But FeedBurner's future seems very up in the air. I think I'll just directly host it for now and see how it goes.

The RSS feed for Snippets (this one is older, thus IS on FeedBurner) was broken. Really dumb little thing about the XML header being output one line down instead of as the first line of the file. RSS XML is some finicky stuff. That's fixed now and it barfed up a backlog of snippets onto Twitter.

Fox level subscribers have until December 5th to download videos from The Lodge. I originally wanted to offer video downloads to any Lodge subscriber, but costs are too high. Bear level subscribers will have access to all downloads of everything. Fox level subscribers have access to all videos, you'll just need to watch them directly on the site.

I get to be part of The Pastry Box Project next year.

Mixture is definitely worth keeping an eye on, folks. Especially for those folks who really have gotten into fancied local development (e.g. static site generators, CodeKit, running local servers, etc). It's on Windows too...

Estelle Weyl interviewed me for the Webstock Blog. I'll be at Webstock in Feburary. I'm going to interview Estelle right back and post it on this blog.

I'm on the second video on this The Next Web post that was shot immediately after I spoke at FOWD New York. There is a weird ad first, but the video kicks in after that.

CSS-Tricks Chronicle VII

I don't think I mentioned this here yet, so: I redesigned my personal site. It's nothing mindblowing, it's just some simple boxes with words in them. I'm happy to have shed my old site which was full of old junk. I'd be happy to have you read it, but the posts will be personal and rarely about web stuff or tech. I will be bringing comments back on it as soon as I can.

The most interesting fact about it: Other than one declaration of font-family, I used no typographic CSS at all. The user-agent stylesheet in browsers has a reasonable set of defaults for text elements and I just went with it.

I started using Divvy and it's been super helpful. It's just a tiny little menu bar app for Mac that allows you to position windows based on a grid you set up. I'm pretty messy with my open windows, and I'm often fiddling with them to get a useful arrangement. Usually, that's browser-on-the-left and sublime-on-the-right. Divvy allows me to get into that setup in just a few commands. It's the little things, right?

As I've written about, I absolutely love the idea of working in public. It's super cool that Daniel Mall and team will be doing it with the Reading is Fundamental website.

I was on the SassCast with Dale Sande recently.

Speaking of Sass, as I'm rewatching and writing notes for the last of the videos in The Lodge, it occurs to much how much Sass is in all those videos. If you're looking to dig into learning Sass and what it's like on real world projects, you could do worse than watching the videos there.

Speaking of The Lodge, I recently spoke with a member who lived in New Zealand. Apparently the internet is quite slow there, and it would take an incredibly long time to download all the videos. I agreed to send them little USB drives with the videos on them. If anyone else is in that position, let me know and I can do the same for you. I need to charge $150 for it though, as the drives of that size are a bit expensive and requires me doing some work.

I made this kinda neat "stairway" style navigation. It's probably a little obnoxious for general use but it could work in some contexts. I used to blog stuff like this after I built it, tutorial style. I should get back to that.

As I type I'm right in the middle of a big multi-leg trip. I was in New York for the first time for FOWD which went very well. I got to be the keynote on the first day! I loved Zoe Gillenwater's talk about future layout specs. Carl did a great job keynoting the second day. I sadly missed Darcy Clarke's talk but he does have some videos of us hanging out that should never make it to the internet.

I got to visit Vimeo's office while I was there thanks to Joe.

My travels this year are far from over. Next I'm headed to Baton Rouge to visit Richard, who I've been nerdfriends with since long before CSS-Tricks was even a thing.

Then I head to Salt Lake City for a day to give a workshop for Deseret Digital, who backed me on Kickstarter to the level of a personal workshop. Then back home for a few days before flying to Philly to do another one of those. Then Hawaii for the conferences there, then back to Wisconsin again for the holidays.

It has been and will be a lot of fun, but I'm sensing the travel burnout coming and I've purposely been very protective of 2013 - keeping it as absolutely free from commitment as possible. I'm at my best during long periods of simple home living.

CSS-Tricks Chronicle VI

That Twitter Cards thing I mentioned in the last Chronicle worked out. You can now see "View Summary" links when someone tweets a link to CSS-Tricks, which when clicked provided some extra context to the article.


All I had to do was turn on the checkbox to add the meta data via the WordPress SEO plugin and apply on Twitter.

BD Conf was pretty fun. I love the gigantic Gaylord hotels they are at. My new talk went pretty well. The workshop went OK but it was no masterpiece. I'm in a weird place where I'm stuck between wanting to take this as a personal challenge and work on doing amazing workshops or going the other way and stopping doing them.

ConvergeFL was also fun. I got to give the workflow talk a second time and it was a bit more refined. Now I'm back home for a few weeks before taking off again for Future of Web Design in New York. Will be my first time ever to New York.

At ConvergeFL, I attended a workshop on eye tracking by JD Graffam (and team) of SimpleFocus. Afterward we did an eye tracking study on CSS-Tricks. Four different people and ran through a script that took about 40 minutes for each person. I'll be sharing more about that as soon as I can.

I had to put pagination in at The Lodge because all the sudden people were reporting the main video list crashing their iOS devices. I suspect the same exact problem as documented here.

I also added a "Mark as Watched" feature for videos there, so you can tick them off as you watch them and keep your place.

157 videos have now been posted there. That's all but one, a final wrapup, which I hope to shoot and post soon.

I made a proper testing demo for using icon fonts and added it to this blog post. In my testing using VoiceOver on OS X Mountain Lion, the best way is still with a span and pseudo element.

I updated the Treehouse logo in the header to use SVG. I can do that because this site only supports IE 9+. I could have put in a fallback, but didn't have to because of that support level. This is just a friendly reminder that SVG is pretty awesome for vector art. More importantly, it's not weird or hard to use. You use SVG just like you would JPG, GIF, or PNG:

<img src="logo.svg" alt="Logo">


div {
  background: url(logo.svg);

I'm going to be speaking at Webstock in New Zealand this coming Feburary. The speaker list is different than the usual web design conferences I normally go to. Jim Coudal, John Gruber, Jason Kottke... whaaaa? Awesome.

I worked up a series of six media queries that handle a pretty common situation these days:

  1. Small screen not retina
  2. Small screen retina
  3. Medium screen not retina
  4. Medium screen retina
  5. Large screen not retina
  6. Large screen retina

It sparked a good bit of debate on Twitter, but is was a little out of context there. The big use case: delivering specific "hero" assets perfect for the occasion. Perhaps a large screen background image like The Lodge has. I'm not suggesting we fork layouts for these scenarios, but I am suggesting some intelligent asset delivery for them is a good idea, and you can begin to do through smart media queries.

CSS-Tricks Chronicle V

You can now use Markdown anywhere you would write something on CSS-Tricks, namely the comments section here on the blog or when creating or replying to threads in the Forums. I like it. I think it makes writing comments much quicker and flow nicer, rather than being interrupted to go back and add actual HTML anchor tags when making a link (which often leads to just pasted URLs) or for making lists (which almost nobody ever does, they just write the bullets or numbers right in the text).

I've now published up to video #75 in The Lodge. That's about half way done. I said it would take me a month to get them all done and it looks like that will be just about accurate. It takes a while because I don't just upload the video and be done with it, I also write up notes that go along with each video that include further thoughts and relevant links.

Speaking of Lodge videos, I'm enjoying the comment threads happening on those videos. Comment threads here on the blog are pretty good too in general, but the slower pace and more thoughtful (some long-form) comments happening in Lodge videos are fantastic.

Also speaking of comments, you can now leave Pens from CodePen in comment threads for blog posts on this site. See the comment thread on this post. It doesn't work on just any site's comment threads because it requires a <script> to work which usually (rightly) gets stripped from user generated content, but I load that script on this site.

I'd really like to get Pens working in forum threads. It should be easy, the problem is that Markdown in the forums is stripping the data-* attributes off the <pre> tags in the copy-and-paste code we give you from CodePen, which are required for it to work. Not sure why this happens in the forums but not on the blog. If anyone has any ideas, there is an open forum thread.

I take off this Saturday for Dallas, Texas and BD Conf where I'll be giving a brand new talk and workshop. I don't usually get super nervous for talks unless it's brand new material for a discerning audience, and, yep. I'm just going to have to practice more.

After I get back from that I'm only home a few days before I'm headed to Tallahasse, Florida for Converge FL. I'll be giving a talk there as well as doing some eye tracking studies for this website with a real eye tracking machine.

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

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed