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

Article Archives

Sponsor: Treehouse

I'd like to specially thank Treehouse today for being such an awesome long-time sponsor of CSS-Tricks. Just imagine how many people they have helped over the years learn web and mobile design and development. It's damn impressive. I've watched Treehouse evolve over the years and you can see how their experience with students guides how they teach and how the site works. For instance, I love how there are different ways to learn: take a track toward a goal like …

9 comments

Prefetching, preloading, prebrowsing

When we talk about front end performance we think things like concatenation, minification, caching, or gzipping assets on the server so that the page loads faster and users can complete their goals as quickly as possible.

Resource prefetching is another performance enhancing technique. We can use it to tell the browser which assets the user might need in the future—before they even need them.…

22 comments

Gulp for Beginners

The following is a guest post by Zell Liew. I'm stoked to have Zell dishing out some Gulp 101. Zell has a comprehensive tutorial style (see his post on Susy) that lends itself well to a topic of this scope. I've also tackled Grunt in a similar fashion. I get the sense people found that pretty darn helpful, so here we go again with the equally popular Gulp!

3 comments

DIY Priority+ Navigation

We've written a bit about the Priority+ pattern here before. Here's a bunch of real world examples. I needed to use it recently. I found Gijs Rogé's priority-navigation. It's pretty nice: no dependencies, clean code, fairly configurable and designable. It's not particularly small though, and there is a good amount of it defining helper functions. I was in an environment that had all that stuff available and so I figured I'd take a crack at a version. …

9 comments

Six Tips for Chrome DevTools

The following is a guest post by Umar Hansa. Umar has a newsletter I'm a fan of and graciously offered to write this guest post in that style. I'll let him introduce himself.

Hey, I'm Umar. I like to share web development related tips on Twitter (@umaar) and also through Dev Tips which is a newsletter of developer tips in the form of gifs. Right now, it's all primarily Chrome DevTools related. Before we get started, thank you …

Sponsor: imgix — Real-time Image Resizing as a Service

Looking to take advantage of the srcset attribute or <picture> element, but don't want to store the different versions of each image? Looking to apply blurs to images that don't peg the browser? imgix can help.

imgix is a real-time image resizing service and CDN. Resize, crop, and process images simply by changing their URLs. Mix and match over 90 URL parameters for unlimited different ways to process images.

It's free to sign up, and every new account gets $10 …

Responsive Images 101

Jason Grigsby just wrapped up a 10-part series masterclass on responsive images. There is a table of contents at the bottom of each post for jumping around. …

16 comments

Styling a Server-Generated File Directory

The following is a guest post by Keith Knittel. Keith used a tutorial on this site to build his own customized file directory. I was like, hey, that oughta be a better-explained tutorial on this site. So here we are.

“probably doesn’t do what you think it does”

An interesting post about the odd behaviour of querySelectorAll where it'll match elements that you might not expect at first glance:

I think this API is surprising, and the front end engineers I've asked seem to agree with me. This is, however, not a bug; it's definitely how the spec claims it should work, and how it works in Firefox, Chrome and Safari.…

BEMIT: Taking the BEM Naming Convention a Step Further

Harry Roberts takes a look back at his previous post on abstracting classes and expands on the idea by using the @ symbol:

The @ is a human readable and logical way of denoting conditional states. It allows developers to learn about any potential permutations or appearances that the piece of UI in question might have, just at a glance.

For instance, instead of making a class such as .is-hidden--large (where an element is only hidden on large breakpoints) we'd …

13 comments

Tight Fitting SVG Shapes, the Present and Future

The following is a guest post by Ana Tudor. Ana tackles an interesting problem here: what happens when the stroke of an element grows it such that it appears cut off? Getting it to fit tightly again may seem like an exercise in guessing, checking, and magic numbers. But if you know Ana's work, you'll know she is uniquely qualified to teach us the math behind getting to the correct solution. She approaches it a number of different ways,

Bootstrap 4 Alpha

Major changes in Version 4. Some highlights:

  • Moved to Sass from LESS
  • This version of box-sizing as part of their new reset.
  • Opt-in (single variable toggle) to use flexbox on the grids/components.
  • Type set mostly in rems
  • All JavaScript in ES6

And another big move for them: monitization through purchasable themes designed by the Bootstrap team themselves.…

Zoomable UIs

Joni Korpi on the redesign of his personal website, where he describes all the issues involving "zoomable user interfaces", or ZUIs. For example, clicking on a link will zoom into that particular element rather than cause a full page refresh.

There is no home page or navigation menu. These two elements are usually among the hardest to design, so I'm glad to be rid of them. In this design, they're both replaced by the same thing: a zoomable view of …

31 comments

Timber and Twig Reignited My Love for WordPress

The following is a guest post by TJ Fogarty. TJ pitched me some ideas for articles and I latched on to this one right away. I've heard this same sentiment from a few other people. Then on a bit of investigation, I can understand why. As you'll soon see, not only do you get a lovely syntax to work with while working with themes, but it separates concerns a bit better. It's almost like a normal theme file gets

5 comments

Recent Conference Talks Worth Watching

These are some of my favorites from conferences I've either been to lately, have watched online, or were recommended to me (in which case they aren't always super recent). I link up the playlist of videos from the conference the talk was at where I can, as your taste in talks may be different than mine.

I like the idea of popping stuff like this on the ol' TV at night sometimes rather than whatever mindless garbage I normally watch. …

MailChimp Style Guide

Interesting that it's not about code or design (in a traditional sense). It's about writing and copy and tone and and that kind of thing. Distinctly different from their Patterns. Makes sense to me. There doesn't seem to be much consistency with naming on these things though. Looking through here, it seems most people think of "style guide" as a visual thing.

Also, Facebook.…

Sponsor: MakerSquare (Immersive JavaScript Courses in Austin, San Francisco and LA)

Start your career as a Software Engineer by joining an exceptional community of passionate learners. MakerSquare's 12-week immersive coding school is currently accepting applications for classes beginning September 14th, October 5th and November 2nd.

With a JavaScript-based curriculum built in partnership with Hack Reactor and an API development sprint supported by Uber Engineers, MakerSquare's course has never offered more opportunity for growth. Reach your potential with the help of a renowned team - apply today for courses beginning every 7 …

randomColor

David Merfield:

There are lots of clever one-liners for generating random colors:

'#' + Math.floor(Math.random()*16777215).toString(16);

Unfortunately, this code naturally produces lots of greys and browns and murky greens.

randomColor generates attractive colors by default. More specifically, randomColor produces bright colors with a reasonably high saturation. This makes randomColor particularly useful for data visualizations and generative art.…

14 comments

First Impression of GitHub Desktop

GitHub Desktop was released late last week.

Wait, doesn't GitHub already have two desktop apps? If the same question crossed your mind when you first read that, then you are not alone. Yes, GitHub did have two desktop apps—one for Mac OS and one for Windows—but decided to unify them into a single app. Instead of GitHub for Mac and GitHub for Windows, we are now left with just GitHub Desktop.

I was planning to write up a …

9 comments

Making Charts with CSS

There are many ways to make visual representations of data: bar charts, line graphs, scatter diagrams, sparklines... not to mention the many ways in which you can implement them on the web. In this post I'll be looking at plain CSS methods for styling data. …

4 comments

Building A Circular Navigation with CSS Clip Paths

The following is guest post by Sara Soueidan. Sara is always doing wonderful creative work, and then does an equally wonderful job explaining all the ins and outs of how it was done with web tech. Here, she'll walk us through building a circular menu in what (should be) the simplest possible way.

21 comments

Strategies for Cache-Busting CSS

Major performance gains are to be had from browser caching CSS. You ensure your server is set up to send headers that tell the browser to hang onto the CSS file for a given amount of time. It's a best-practice that many if not most sites are doing already.

Hand-in-hand with browser caching is cache busting. Say the browser has the CSS file cached for one year (not uncommon). Then you want to change the CSS. You need a …

Sponsor: An Event Apart

Set yourself apart. Get better at what you do today and find out how you'll be doing your job in a year or two. An Event Apart—three days of design, code, and content for people who make websites—is 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. Don't miss it!

Office Hours (A new thing at CSS-Tricks where offer live help)

That's right, a new benefit for being a Lodge member!

Office Hours is for live help with web design and development. When office hours are in session, you'll be able to talk directly to another human being about any problem you might be having with web design or development.

Feel free to join us during our live office hours to get the best help we can offer on anything web design or development. Or because you like hanging out and …

11 comments

Localizing Times in JavaScript

Say you have a time you'd like to display on your site. You've entered it in your time zone. You can always be specific and say something like: 3:00 PM Eastern Standard Time. Then leave it up to whoever is reading to convert it to their local time. Every Time Zone is a great site for that.

But it can be nice to localize the time for the reader. Time zone conversion is notoriously confusing. And it's the type …

Learning Fluency

Sara Simon's recent Burlington Ruby Conf talk, repurposed as an essay. It's about exploring different approaches to becoming fluent in a programming language. But, it's also about:

[W]hat we can learn about software development when we step away from our computers and into kitchens. When we step away from our computers and into newsrooms. When we step into chess tournaments. When we step into foreign languages classes. When we step onstage.

It's a long, deep read that rewards rereading.…

The WordPress Template Hierarchy

A visual and linked-up version of the template hierarchy. If you work on WordPress sites, it's good to know how everything kinda waterfalls down towards the index.php file. That file is what will be be used to render any page, unless there is a more specific one present. It looks complicated, but it allows you get pretty specific with your templating without having to do much other than plop a file in.

The newest member is `singular.php`, coming in 4.3, …

How DNS Works

A cleverly illustrated website that takes a look at what happens after you enter a URL into the browser. This answers questions like what is a root server and what the heck is an IP address?…

10 comments

Scroll Drawing

We've taken an in-depth look at how SVG line drawing works before. It's a clever trick where you use dashed lines for the stroke, but the gap in the dash is so long it covers the entire path. Then you can move it such that it covers the entire path again, which makes it appear as if it's drawing itself.

Using a bit of JavaScript, we can get a little fancier, drawing the shape to completion as page is scrolled …

Push Notifications for the Web

This isn't the regular Notifications API, this is more like phone notifications, where you don't even have to (have the app open || be on the website) for it to work. Uses the fancy new Service Workers.

It requires and opt-in, so it's only as spammy as you let it be. I can imagine some pretty useful stuff: "Your bus is behind schedule", "You've got a new match", "Your website isn't responding"... things you want to know faster than …

Sponsor: ParallaxOne, a Free WordPress Theme by Themeisle

After building (probably) the most popular WordPress theme of 2015, the team at Themeisle used everything they learned to release something even better: ParallaxOne.

You don't even need to read the documentation. Everything is customizable and built with developers in mind. No framework to learn, no custom functions or a special file system. Just plain ol' WordPress. Take a look for yourself at the GitHub Repository and checkout the demo.

Dynamic Web Typography with Typekit

Typekit has started to roll out a new feature called Dynamic Subsetting which greatly reduces the size of each font file that's sent over the network. This post Tom Newton describes the current solution for doing this with Latin fonts. The process is a little hacky at the moment but I'm sure they'll be spreading this feature to other languages properly in the future.…

Designing for Performance

Lara Hogan has just published her excellent book Designing for Performance for free online. She takes a good look at what makes a website feel slow and how that experience affects design and business goals:

Page speed is increasingly important for websites. If you're looking for a page load time benchmark for your site, this is it: users expect pages to load in two seconds, and after three seconds, up to 40% of users will abandon your site. Moreover, …

Quantity Queries

Using :nth-child (and friends), you can write selectors that target elements when they have a certain number of siblings. So you can write CSS that, for example, styles widgets to be 33.33% wide if there are exactly 3 of them.

The selectors are a bit complicated though, so this tool by Drew Minns is pretty helpful.

And perhaps controversially, a PostCSS plugin for the same.…

15 comments

The Gray Gray Ghost That I Call Home

There is a great scene in Cold Mountain where Inman, who is AWOL from the army in The Civil War, is walking through the woods on a horse opposite Bosie, the deputy charged with catching people like Inman. The two are at a gunpoint standoff:

Bosie: Tell you what I got on my side.
Inman: What have you got on your side?
Bosie: The confidence of youth.

Bosie is absolute in his convictions. Inman had done wrong and for that …

Sponsor: Frontend Masters

Frontend Masters is known for some of the highest-quality video training courses in the industry. Their teachers are experts in their field—like the creator of AngularJS, multiple jQuery team members, and the founder of JSON.

Right now, get your choice of a full-week in-depth video lesson. All of which include:

  • 5 full days of in-depth instruction by experts who use these skills every day
  • Worksheets, exercises and challenges to help you test your knowledge
  • Drilled-down, actionable lessons that you can
16 comments

Debugging CSS Keyframe Animations

Creating CSS animations may be about learning the syntax, but mastering a beautiful and intuitive-feeling animation requires a bit more nuance. Since animations command so much attention, it's important to refine our code to get the timing right and debug things when they go wrong. After tackling this problem myself, I thought I'd collect some of the tools that exist to aid in this process.…

Understanding Proxy Browsers

A new series of posts by Tim Kadlec on proxy browsers and why some people need them:

I'd venture to say that most developers and designers are not big fans of proxy browsers—assuming they pay attention to them at all. They don't behave in ways a typical browser does, which leads to frustration as we see our carefully created sites fall apart for seemingly no reason at all. And frankly, most of us don't really need to use them on …

Motion along path in CSS

From the "I barely knew this was a thing and you can already play with it in browsers" files:

Motion paths allow authors to animate any graphical object along an author-specified path.

I suspect Chrome jumped on this because it's something that was only otherwise doable in SMIL, which they are ditching. I believe this is the first time the full path syntax has made it into CSS? (e.g. motion-path: path('M100,250 C 100,50 400,50 400,250');).

There are some demos

On The Verge

A fun bit of #hotdrama around mobile web performance.

Apparently it's possible to be of the opinion that slow, sucky websites are the fault of browsers and not the fact that the websites are jam packed with garbage assets.…

Position an element relatively to another element

Not possible currently in CSS, but there is a discussion happening around syntax like:

.el { position: element(#target) }

Of course there are tons of details, gotchas, and edge cases, but it sounds likely.…

Scroll-to-top-then-fixed

Chrome yanked position: sticky;, but Firefox and Safari still have it. Dudley Storey shows how to do the common sidebar pattern where a chunk follows you as you scroll down, but only when there is room for it. He does it in CSS, and the demo polyfills support with stickyfill.…

Modern CSS Layout, power and responsibility

Rachel Andrew reminds us that the power new CSS layout methods gives us could be used to form new anti-patterns:

With this power comes great responsibility. For just as it will be possible for a developer to start out with a beautifully semantic, well structured document and use Grid and Flexbox to meet the design requirements, it will be possible for them to stop caring about the document structure at all. Worse, I believe there will be a strong temptation, …

Thinking Ahead: CSS Scroll Snap Points

Guil Hernandez introduces how easy sliders (with nice UX) will be with very simple HTML and CSS' brand new scroll-snap-* properties. CSS is moving fairly fast these days, with features like this moving from "never heard of it" to:

... browser support for CSS scroll snap points is limited to IE10+ and Firefox 39+. But it looks like Safari 9 will include support, and you can enable scroll snap points in Chrome Canary.

before you know it. The Chrome support …

49 comments

The Difference Between Minification and Gzipping

These are both things that you do to assets on your website (things like .css files and .js files). They are both things that reduce the size of the file, making it more efficient in crossing the network between servers and browsers. As in, good for performance. The network is the speed bottleneck of the web and reducing file size helps.

But these two things are distinctly different. If you didn't already know that, it's worth understanding.…

54 comments

Front End Development is Development

There is some sentiment out there that front end development isn't real development. It's a swaggering, trollish sentiment. Still, it's fun to puff our chests back sometimes. Let's try to put a point on why front end development is every bit as difficult and worthy of the title as any other subset.…