Treehouse: Grow your CSS skills. Land your dream job.

Article Archives

79 comments

Thought Process of a Front End Problem

Someone graciously takes the time to write in to let me know the fonts on this site look weird in Opera Mobile. What is a poor front end developer to do?
20 comments

Single Page Refresh for Client Side Data Server Side

UPDATE: I have a newer article "Server Side Mustard Cut" that covers this same ground and has many of the quirks worked out. That's probably a better read.

We recently covered how you could get client-side information and make it available server side. Do real tests on the client, like measure browser window width and do feature tests. Then save that data to a Cookie. Then next time the page is loaded, you'll have that data in a cookie.…

A Dive Into Plain JavaScript

I think jQuery provides so much benefit it still makes sense to use on projects of even modest scope and up. But knowing how to do the simple stuff without it is very good to know, and getting pretty easy these days as long as you "cut the mustard" first.…

33 comments

Changing Between Spaces and Tabs in Sublime Text

Sublime Text is pretty dang good at making it easy to switch between using tabs and spaces to indent your code. More importantly, it makes it easy to adjust the indentation of code that doesn't match your preference. I thought I'd put this together for reference, as there is a particular sequence of steps for some of the transitions that needs to be followed.…

How fast is fast enough?

100ms is the ultimate goal since that feels instantaneous. 20% faster than a competitor will be noticed. 1000ms is a practical goal, which refers to "Speed Index" (visually and functionally ready) not window.onload.…

167 comments

When to use target=”_blank”

Anchor links1 may have a target attribute which controls what happens when that link is clicked. One of the possible values of that attribute is _blank, which tells the browser to open a new window (or tab, if that's the user's preference) when that link is clicked.

This used to be "invalid" in HTML (maybe only XHTML?) but people used it anyway since it worked. It's now perfectly valid in HTML5. But are there good reasons to do …

// in CSS

A lot of people, me included, wish we could use // for single line comments in CSS. Tab Atkins explains why it's probably not going to happen, but weirdly enough, you can actually use them now if you're careful.…

55 comments

The Syntax vs The Spirit

Sometimes I literally can't remember how to write a for loop. Not like funny ha-ha I can't remember how to spell "psychology" but really I can figure it out in a few seconds. Like, go to Google, type in "for loop PHP", click on a promising result, copy and paste, then alter it.

I'm mostly a front-end guy, but I'm essentially a professional programmer. Isn't that ridiculous and embarrassing? Meh.…

Front End Ops

As Alex Sexton laid out, it's a thing. More and more people will be hired to do it specifically and organizations will start thinking of it as an important piece of the pie. These slides by Ian Feather help explain what that might look like.…

97 comments

When To Use The Button Element

You use it when, uhm, you want a button on your page that users can click, right? Well, unfortunately it's a bit more complicated than that. It's not too bad though, let's figure it out.…

Web Standards Killed The HTML Star

Jeff Croft argues that because the web standards movement did such a good job, the "HTML and CSS guru" of old is a commoditized job. "Diversify or die", he says, meaning level up your abilities in other web tech to remain employed.

I agree with the sentiment. Web standards have become a thing to be thankful for, not a scrappy underdog. Not that we shouldn't keep a keen eye out for wrong turns.

But I don't think HTML/CSS people …

The Intrinsic Value of Blogging

Speaking of writing tips, Matt Mullenweg on how you should write for just two people: yourself, and

a single person who you have in mind as the perfect person to read what you write, almost like a letter, even if they never will, or a person who you’re sure will read it because of a connection you have to them (hi Mom!).…

50 comments

Words To Avoid in Educational Writing

I'm no English major, but as a writer and consumer of loads of educational (mostly tech) writing, I've come to notice a number of words and phrases that come up fairly often and don't add anything to the writing. In fact, they might detract from it.

This started as a Twitter discussion so I thought I'd write it up more clearly.…

58 comments

Thank You (2013 Edition)

GROUP HUG! It's that time of year I give ya'll the biggest warmest THANKS I can. CSS-Tricks is the foundation of my career and makes my life possible. And thus it is to you, dear reader, that I owe everything.…

42 comments

What is the DOM?

A reader recently wrote in asking me what the DOM was. They said they've heard it mentioned and alluded to, but aren't sure they really understand it.

We can fix that. …

On interviewing front-end engineers

Nicholas C. Zakas with a follow up to Philip Walton's article.

Front-end engineers are, of course, specialists. We care about things that seem insane to others: understanding differences between dozens of browsers, pixels vs. ems, PNG vs. JPEG, compatibility of JavaScript APIs, how to construct a DOM to represent a UI, and so on.

The things I look for in a front-end engineer have little to do with traditional computer science concepts.…

LICEcap

Animated GIFs, aside from being megalolfunny, can be tremendously useful in communicating an idea. Like this or this. I get asked often how I make those. There is nothing to it, just use this app.…

24 comments

Make Sure Your Columns Don’t Collapse Horizontally

You might be familiar with elements collapsing vertically. If an element only contains other elements that are floated, the parent element will collapse to zero height. We often employ the clear fix for that. But if an element doesn't contain anything, it can collapse horizontally as well, which can be quite awkward for layout.…

CSS is 17

Some nice history on the birth of CSS by John Allsopp.…

The Growth of CSS Repos on GitHub

Interesting statistic uncovered by Donnie Berkholz: the number of repos that GitHub classifies as "CSS" (has more CSS in it than any other language) grew 13.6x in 2013. Doubling would be crazy, this is something else entirely. Assuming this isn't a fluke in how GitHub classifies this kind of thing.…

Myth

I thought I'd weigh in here...

  1. Calling it a "postprocessor" is weird. It gets parsed into CSS before the browser sees it, so it's a preprocessor. If something parses the CSS out from the browser, it can be a postprocessor, ala -prefix-free.
  2. I really love the idea of authoring as if vendor prefixes never existed and letting software fix it up for you. This is what Autoprefixer does. It might just use that internally?
  3. The whole point of calc()
29 comments

About Variables in CSS and Abstractions in Web Languages

Variables are coming to CSS. They already have implementations, so there is no stopping it now. Firefox has them in version 29 and Chrome has them unprefixed in 29+ if you have the "Enable experimental Web Platform features" flag turned on.

To be clear, no amount of arguing on whether this is good or bad is going to change things at this point. But I still think it's interesting, so let's talk about it anyway.…

42 comments

Line Menu Icon… That Is A Menu

I had a dumb little idea the other night so I just coded it up (as you do). You know those little icons that have come represent navigation? We've called them Three Line Menu icons around here, but otherwise known as Navicon (clever) or Hamburger (dumb). The point of that icon is that it looks like a little menu, so hopefully it's obvious you click it to reveal a real menu. But what if that icon wasn't an icon at …

What You May Not Know About Z-Index

It controls which element is "on top" visually when they happen to overlap, right? Right. But there is more to the stacking order, much of which you can't control. You can control stacking contexts though, which kind of reset the playing field within them, but themselves can be stacked. Steven Bradley explains.

Related: Jake Archibald also encountered this and has a little more info. Paul Lewis explains how this (kinda sucky) situation is unique to the web. Philip …

59 comments

New Poll: Command Line Usage

I have a feeling the readers of CSS-Tricks represent a fairly wide range of job types and skill levels. It would be interesting to know how frequently used command line usage is amongst the general web worker population.…

14 comments

Why You Should Use Continuous Integration and Continuous Deployment

The following is a guest post by Florian Motlik. Florian is CTO of Codeship, a hosted Continuous Integration and Continuous Deployment platform. What the heck is that, you might ask? It's kind of a philosophy and toolset for working on websites. That is perhaps a bit too simplified, so I'll let Florian explain.

Animated SVGs

Mike Fortress explains animation with <svg> with a specific example involving charts on Sprout.

It's funny how SVG has all these great features like gradients and filters and animations that we have in CSS, but the syntax is so different. I think it would be cool if there was some kind of converter that would let us target SVG parts with CSS selectors, apply things like gradients, filters, and animations, and it would convert it into the SVG format that …

Chrome DevTools for Mobile

Emulate mobile devices directly through DevTools, simulating touch events, mimicking screen size, and spoofing user agent.

Plug in a mobile device over USB and use Chrome DevTools on the actual mobile browser. Push your local site to the mobile device with port forwarding.

This is excellent stuff, not only because it's very powerful, but because it's easy.…

26 comments

SVG Tabs (Using an SVG Shape as Template)

An excellent feature of SVG is that you can define a shape (or set of shapes) once, and then use it multiple times throughout a page. You can even apply different fills and filters and whatnot to the different versions. SVG templating, if you will.

Let's see if we can put that to good use by creating some tabs.…

20 comments

Colorpeek: A Simple Way to See and Share CSS Colors

The following is a guest post by Tyler Sticka Tyler created a tool called Colorpeek. In this article, he'll introduce you to what the web app does and why, and then how the Chrome Extension works to extend that. Then tomorrow, stay tuned, as Tyler will show us how he built the Chrome Extension.…

58 comments

A Blue Box

A little meme went around CodePen the other night. A Blue Box. I'm not sure how it started, but lots of people started posting code of different ways to draw a blue box. It's weird, it's funny, but it's also rather amazing there is as many ways as there are for doing something so simple. …

Turn Off Hovers on Scroll

Sometimes hover effects can cause redraws and repaints and whatnot that take time and reduce performance. As you scroll down a page, you're likely inadvertently triggering hover events that have no meaning while you scroll. Turning them off (via CSS's pointer-events) is a clever way to reclaim some scrolling performance.…

Dom Monster

A bookmarklet you can click to give you performance information specifically related to the DOM. E.g. duplicate IDs, excessive stylesheets, excessive nesting, empty nodes, HTML comments, etc.…

Responsive Comments

Meaning like <!-- these kind of comments -->. You put a media query in a data-* attribute of a parent element and it will determine if that block of commented HTML should be un-commented or not. A form of conditional loading. If the HTML bloat bothers you, I suspect it could be easily adapted to load the comment from a URL at another data-* attribute instead.…

26 comments

The HTML5 meter Element

The following is a guest post by Pankaj Parashar. Pankaj has written here before, last time about the progress element. Fitting indeed then to write again about the very related meter element. They are different both functionally and semantically, so read on!

What Screens Want

I'm happy to be the last person in our industry to link to Frank Chimero's beautiful essay on screen design (watch the colors slowly fade emphasizing the "flux" point). A small point I like:

We need abstractions, otherwise we’d be writing code in machine language or Assembly

Exactly the point I've been making in recent talks and in my foreword in Sass for Web Designers.

Ultimately I'm not quite as pessimistic (i.e. the "things are starting to suck" vibe). I …

32 comments

Introducing Scut, a new Sass utility library

The following is a guest post by David Clark. I think David's new Sass library "Scut" is pretty interesting. It's like a design utility library, which is distinct from a design pattern library in that it enforces no particular structure or particular visual design. I've always found this kind of thing fascinating, largely because I've never been able to pull it off in a way that feels good to me. I always end up leaning too far into visual

50 comments

Why Responsive Images Is So Hard

Perhaps you've been keeping up on the responsive images #hotdrama? If you have no idea what "responsive images" means, it means serving different images under different circumstances. How to do that and what those circumstances are vary widely.…

18 comments

Namespaced Events in jQuery

It's really easy to add an event listener in jQuery. It's equally easy to remove an event listener. You might want to remove a listener because you don't care to perform any actions on that event anymore, to reduce memory usage, or both. But let's say you've attached several listeners to the same event. How do you remove just one of them? Namespacing can help.…

Caption Everything

Help Dave Rupert build a thing:

I started a repository called WordCast under the Accessibility Project with the goal of converting that CodePen into a Node/Express/Socket.IO app that can brodcast subtitles. I’ve never built anything on any of these buzzwords I just typed, so I could definitely use some help.…