Article Archives

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.

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.

(more…)

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.

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 so?

(more…)

// 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.

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.

(more…)

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.

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 are at too much risk. If anything, I've experienced these people being hard to find and in short supply. As Jeff suggests, sprinkle in some fancy modern tools and you're pretty set.

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!).

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.

(more…)

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.

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() is that you can do things that are impossible to calculate before the browser is involved (e.g. 100% - 20px). It should be more clear that this can't preprocess calc() into working in browsers that don't support it.
  4. The preprocessor wars are far from over!

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.

(more…)

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 all, but the actual menu, just shrunken?

(more…)

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 Walton explains yet another way.

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.

(more…)

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 actually works. Or maybe I'm just lazy.

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.

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.

(more…)

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.

(more…)

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.

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 think things are going pretty darn well 'round these parts.

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 design, or too abstract to the point of it not being all that useful. I think David just might be on the right track here. I'll let him explain in detail.

(more…)

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.

(more…)

The CSS Standards Process

The following is a guest post by Sebastian Ekström (@seb_ekstrom) a web developer from Sweden. I was interested in it because we talk a lot about CSS around here but have never talked about how CSS comes to be. CSS is just a syntax invented by people like you and me to try and solve problems. It's an extremely complicated thing involving: ease of use, backwards compatibility, browsers ability to implement with satisfactory speed, coverage of use cases, attempting to see the future of what is needed and how things may be used, and more. As we well know, bad choices hurt, and hurt for a long time. That's why there is a process. Here is Sebastian's intro to that process. I had Tab Atkins review it and comment prior to publication.

(more…)

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag