Article Archives

bgcolor=white

Over two years ago, I published a dumb-funny little blog post called Please Don't Learn To Code From Stock Photos. It got unearthed somehow and got shared around again recently.

Of course, it's just for laughs, and by and large nobody took it too seriously. But also, there was one little thing in there that tickled the Well Actually Bone of quite a few developer folks. I'd say in the last year or so, 100 people or so have reached out to me one way or another to let me know.

(more…)

Apply to 100 tech companies with 1 application

Indeed Prime helps tech talent such as UX/UI designers and software developers simplify their job search and land their dream job. Candidates get immediate exposure to the best tech companies with just one simple application to Indeed Prime. Companies on Prime’s exclusive platform message candidates with salary and equity upfront. The average software developer gets 5 employer contacts and an average salary offer of $125,000. Indeed Prime is 100% free for candidates – no strings attached. And when you’re hired, Indeed Prime gives you a $2,000 bonus to say thanks for using Prime! Sign up now at indeed.com/prime.

Enhancing a Comment Form

Nice tutorial from Michael Scharnagl in which he takes a perfectly-functional comment form and progressively enhances it with very nice features. Things like custom error messaging, auto-expanding height, and even really fancy stuff like ajax and offline submission.

The API-Based CMS Approach

The following is a post by Levi Gable. Levi digs into the idea of separating the CMS from the presentation of content within that CMS. As Levi will explain, there is a freedom there that can feel mighty good to a web developer. A website can digest an API and present content in whatever the hot new way to do that is. But even more importantly, an API can serve multiple publishing platforms. Levi demonstrates this as well, by having this one API fuel not just a templated website, but a React Native mobile app, and even an Apple Watch app.

(more…)

Style List Markers in CSS

It's a perfectly reasonable to want to style the marker of list items. You know: blue bullets with black text in an unordered list. Or red counters with knockout white numbers in an ordered list.

There is a working draft spec that defines a ::marker pseudo-element that would give us this control.

/* Not supported anywhere; subject to change */
li::marker {
  color: blue;
}

It's possible to do this styling now, though, thanks to CSS counters. The trick is to remove the list-style, then apply the markers through pseudo-element counters.

ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}
li {
  counter-increment: my-awesome-counter;
}
li::before {
  content: counter(my-awesome-counter);

  /* Style away! */

}

See the Pen Styled List Counters by Chris Coyier (@chriscoyier) on CodePen.

The Different Ways of Getting SVG Out of Adobe Illustrator

Let's say you created a lovely vector illustration in Adobe Illustrator. Or you’ve used Illustrator to finesse some existing graphics. Or for literally any reason at all, you have a file open in Adobe Illustrator that you ultimately want to use on the web as SVG.

There are several different ways of getting SVG out of Illustrator, each one a bit different. Let’s take a look.

TL;DR: Exporting, like File > Export > Export As... SVG then optimizing is your best bet for the web.

(more…)

Native Browser Copy To Clipboard

It wasn't that long ago where you couldn't programmatically copy text to the clipboard from the web without using Flash. But it's getting pretty well supported these days. IE 10+, Chrome 43+, Firefox 41+, and Opera 29+, says Matt Gaunt in writing about it on Google's developer site.

Here's the example from that article:

See the Pen Copy Text with a Button (Google Example) by Chris Coyier (@chriscoyier) on CodePen.

That article says it's not supported in Safari, but it is as of Safari 10, which only dropped in September.

You don't need a library to do this stuff, as evidenced by the above demo. But, there is one: clipboard.js. It's only 3kb gzipped. The purpose is to give you a bit of a cleaner API to work with, like success and error events, and configuration through data-* attributes. Here's a demo of that:

See the Pen Simplest Possible Clipboard.js by Chris Coyier (@chriscoyier) on CodePen.

An Introduction to mo.js

mo.js is a JavaScript library devoted to motion for the web. It offers a declarative syntax motion and the creation of elements for animation. Even though mo.js is still in beta, there is already a host of amazing features to play with. Its author, Oleg Solomoka (otherwise known as @legomushroom) creates incredibly impressive demos and tutorials for the library's offerings that you should check out, but in this article we’ll run through a really quick overview of features and tutorials to get you started.

(more…)

Sponsor: Media Temple

One of the interesting things about Media Temple is the breadth of hosting solutions they offer.

Among their least expensive plans is WordPress-specific hosting. Just $20/month, but very powerful and fast hosting, thanks to it being tuned just for WordPress. WP-CLI is installed right on it and it auto-updates WordPress core for you. Not to mention it's all on SSD's, you get SSH access, and you get 24/7 WordPress-certified support.

There are loads of plans that scale up from here, all the way up to incredibly high-end servers. I was just chatting with some Media Temple folks about some real white-glove support they were doing with a huge enterprise client. Guess what kind of site it was? WordPress. All set up on Amazon Web Services and fully managed by Media Temple.

If you go for Grid or DV (level 1 or 2), make sure to use the code CSSTRICKS to save 20% the whole first year.

Adding and Leveraging a CDN on Your Website

If you’ve been working around web development for a while, you’ll know that the web has a need for speed. The truth is simple: speed matters and faster is considered better.

One "easy win" for increasing performance is using a CDN. We’ve discussed this several times at CSS-Tricks. It's easy in that you aren't rewriting a codebase or hand-editing content, but it's an area of performance many of us might overlook because, well, hosting, servers and cPanels, oh my!

Thankfully, the process for integrating a CDN does not have to be hard. (more…)

Lazy Loading Responsive Adsense Ads

You've been hard at work optimizing your site. You've already done things like lazy-loading Google Maps and been wondering if there was anything else you could do. For example, is there anything we can do to improve the loading of ads? Good news, there is some things you can do. You can respect user's mobile data plan by loading ads only when they are likely to appear in the viewport zone. You can also serve ads in the right size in accordance to the screen of the device. That would be nice of you. That would not only be responsive but also responsible.

(more…)

An Intro to Monkey Testing with Gremlins.js

A common idiom in our industry is, "You never can predict how the user will use your product once they get it in their hands." If you've ever watched a stakeholder use a website or web application for the first time, you may know this firsthand. I can't count the number of times I've seen a user seemingly forget how to use websites on a mobile device, or try to use it in a way that makes you think, "But no one would actually do that in real life!"

(more…)

FormLinter

I absolutely love this idea from Thoughtbot. Just like automated tools that check your HTML for syntax, formatting, validity, or whatever else, FormLinter checks your <form> HTML for best practices. Things like every input having a label, using correct input types, required fields, and more.

Ben Orenstein:

Doing all these things right is worth the effort: improvements like these improve accessibility and increase conversions. However, checking this sort of thing by hand is tedious and error-prone.

We were testing some forms in the ol' CSS-Tricks team chat and it was doing what it said on the box. On Geoff's personal site, it gave his contact form a "B" for not having matching labels for inputs and not having any fields required (seems like a fairly high grade?). The form was output from the mega-popular "Contact Form 7" for WordPress, also a bit surprising.

Many of the forms we tested bombed the app though. No word on that. Might be an HTTPS thing?

The SVG 2 Conundrum

The SVG we know and love today is "SVG 1.1 2nd edition". SVG 2 is in Editor's Draft status at the W3C, and it's at serious risk of never getting past that, as it's charter may not be renewed before it reaches recommendation status.

(more…)

Vocalizer

Cool little lib from Atif Azam that allows you to wrap a name in a span and it puts a little 🔊 button to hear the pronunciation. The audio comes from NameShouts. You can't contribute your own pronunciations to NameShouts, best I can tell, but the lib allows you to provide an alternate source.

I made a demo based on the screenshot in the README:

See the Pen Demo of Vocalizer by Chris Coyier (@chriscoyier) on CodePen.

The Best Tech Jobs in the World

Over 4,400 companies are using Hired to find their next team member and with transparency into each company, you’re empowered to make the right decision about what opportunities you’d like to pursue. Say goodbye to pushy recruiters trying to sell you on roles you don’t actually want. Life’s too short to waste time with companies that are a bad fit, or to find out after months of interviewing that the offer is no good.

Try Hired and let companies apply to you. The best part: it’s always free.

The Power of the rgba() Color Function in CSS

One of the things that I'm really interested in about CSS is the new color-mod function. It will give us the ability to do color manipulations right in the browser. For example, when hovering over a button, you can change the color by using something like color: color(black darkness(50%));, without the use of any CSS preprocessor like Sass.

But as the support of these CSS color functions is zero nowadays, we can temporarily use PostCSS and compile them as regular colors. Or we can experiment and discover the power of CSS rgba() color functions to change colors on the fly! Let's see how we can use it.

(more…)

position: sticky;

Better position: sticky; support is on the horizon. WebKit dropped in 2013, Firefox in 2014, and now Blink in (probably) 2016.

MDN explains it well:

Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

Šime Vidas pointed this out in a recent Open Web Platform Daily Digest, and ported over the demo from MDN, which demonstrates the usefulness nicely:

See the Pen Sticky positioning by Šime Vidas (@simevidas) on CodePen.

As you can see in that demo, it's a decent candidate for progressive enhancement, as if you don't see the sticky header feature, it's no big deal.

The State of Responsive 3D Shapes

As some people might know, I've always loved 3D geometry. Which has meant getting drawn towards playing with CSS 3D transforms in order to create various geometric shapes. I've built a huge collection of such demos, which you can check out on CodePen.

Because of this, I've often been asked whether it would be possible to create responsive 3D shapes using, for example, % values instead of the em values my demos normally use. The answer is a bit more complex than a yes/no answer, so I thought it would be a good idea to put it in an article. Let's dive in!

(more…)

Cooperative Scheduling with `requestIdleCallback`

Potch:

If you absolutely must perform tasks on the main thread (mutating the DOM or interacting with main-thread-only Web APIs), you can now request the browser provide you with a window of time in which it is safe to do so!

... requestIdleCallback allows the browser to wait until it identifies an idle period. An idle period may be a few milliseconds between painting individual frames.

This seems like the kind of thing that becomes a best practice. But how do we identify which things we should use this for and what things we shouldn't? Is it like "anytime we touch the DOM we should wrap it in this?" Perhaps with a twist of "unless you're displaying new content to the user, which takes precedence over animation jank." If you're a framework that abstracts away DOM touching (and other main thread tasks), how do you decide to prioritize or not?

Get Out the Vote, CSS Style!

The United States general election is tomorrow! New leaders — including a new president — will be elected to office on November 8 after citizens make their voices heard by casting votes for candidates.

Where does CSS-Tricks fit into the election? This is far from being a place to discuss politics, though we do admit to the occasional dive into office politics such as helping teams have productive discussions about code and how we define our roles in the workplace.

(more…)

Notes from CSS Dev Conf 2016

I've attended every single CSS Dev Conf, five years running now. I've always particularly enjoyed conferences that have a somewhat narrow focus. Since this conference is, no surprise, largely focused on CSS, I think it serves as an interesting state of the union of CSS style conference every year, for me at least.

In years past themes have emerged like: preprocessors, architecture, testing, performance... last year I'd say it was SVG.

(more…)

Demystifying Public Speaking

A new book by Lara Hogan includes some of my favorite advice about public speaking:

As you stand on the stage, remember: your audience is anticipating you’ll be successful at giving this talk. To them, everything has been well thought-out and prepared; they walk in assuming (rightly!) they’re going to learn something new or be inspired...and you’re the person who’ll show them how.

More, they want you to be successful and are quite forgiving. In my experience, you only lose them once you disrespect them (e.g. "Sorry if I'm not very prepared, I wrote this on the flight over here." annnnnd you've lost me.)

Hey while you're over at the A Book Apart store buying this, I heard this one is good.

Web fonts, boy, I don’t know

Nothing like a trip through 2G country to get you thinking hard about web performance. Monica Dinosaurescu:

Listen: it doesn’t have to be this way. You can lazy load your font. It’s 4 lines of JavaScript. 7 if you’re being ambitious.

I still find it fascinating how much we all seemed to hate FOUT, and took steps to fight it, and now are like, "bring back the FOUT!", and largely have.

She suggests async loading, which is good, but remember you can take it further. One-step better is "FOUT with a class" from Zach Leatherman's guide, and gets fancier from there.

Improving Perceived Performance with Multiple Background Images

.masthead {
  /* Might as well let this color show */
  background-color: #3d332b;
  /* As this is loading */
  background-image: url(/img/masthead.jpg);
}

Harry Roberts levels this up by suggesting using a gradient that looks more like the image that loads:

.masthead {
  background-image: 
    url(/img/masthead-large.jpg),
    linear-gradient(to right, #807363 0%, #251d16 50%, #3f302b 75%, #100b09 100%);
}

Will Wallace gets even fancier by creating a Sass @mixin that takes a big array of colors to make an complex gradient that looks even more like a blurred version of the original.

See the Pen "Blurground" gradient function by Will (@wiiiiilllllll) on CodePen.

I still the think coolest way to handle it is the "Blur Up" Technique that Emil Björklund covered here.

Things I’ve Learned About CSS Grid Layout

The following is a guest post by Oliver Williams. Oliver has been working with CSS grid layout and has learned quite a bit along the way. In this article he's going to hop around to different concepts that he's learned on that journey. I like this idea of learning little bite-sized chunks about grid layout, through isolated examples where possible. That makes learning the whole thing a bit less intimidating.

(more…)

A Handmade SVG Bar Chart (featuring some SVG positioning gotchas)

Let's take a look at some things I learned about positioning elements within SVG that I discovered whilst making a (seemingly) simple bar chart earlier this week.

You don't have much choice but to position things in SVG. SVG is a declarative graphics format, and what are graphics but positioned drawing instructions? There are plenty of gotchas and potentially frustrating situations though, so let's get down to it.

(more…)

8 simple rules for a robust, scalable CSS architecture

I don't disagree on any particular point on this thesis by Jarno Rantanen.

This is the first I've seen this particular naming convention, which seems fine to me, but I'd add that any well-considering naming convention works.

Also, there is this:

Cascading styles will ruin your day, eventually.

A sentiment shared by many these days, and the likely culprit for all the peter-griffin-adjusting-the-blinds.gifs out there in the world. Again I don't entirely disagree, but, there are styles I gotta imagine even hardened CSS module aficionados would allow to cascade. For instance: why wouldn't I let the body copy font-family cascade?

“A Quantum Leap”

Trident ~> EdgeHTML
WebKit ~> Blink

... and now ...

Gecko ~> Quantum

David Bryant:

The high-level approach is to rethink many fundamental aspects of how a browser engine works. We’ll be re-engineering foundational building blocks, like how we apply CSS styles, how we execute DOM operations, and how we render graphics to your screen.

He's saying we'll see it in 2017. Hopefully the hype is real! Mozilla having a super-competitive independant browser engine (as it long has) is very good for the web.

Carousels Don’t Have to be Complicated

Over on the MediaTemple blog, I show you how you can make a pretty decent little carousel with just a few lines of code. Here's the entire premise:

Every time a carousel is mentioned in a blog post, it’s a requirement to mention that… say it with me now:

You probably shouldn’t use a carousel.

Jared Smith made a microsite just for it, with research and rhetoric supporting the idea that you shouldn’t use them. Most of that information focuses on the fact that there is low engagement with the non-first-slide(s).

I’m not here to argue with data, but I would argue with the dogmatism of “never user them, EVER.” Swiping on mobile is an extremely common action, and what is a swipe that reveals more content? Basically a carousel. What about a carousel that doesn’t demand much interaction? Perhaps just a way to swipe through an artist’s recent work. This seems like a perfectly nice way to do that, so long as the UI is clear and accessibility is implemented.

What I am here to talk about is the situation where you do want a carousel and to resist the temptation to reach for a wheelbarrow full of code to do so. I guarantee there are people who’ve picked an entire CMS because they thought they needed it to make a carousel. No shame. We’re all learning.

I have good news: Carousels don’t have to be complicated. They don’t have to require a ton of code or do anything that you can’t wrap your head around with basic HTML, CSS, and JavaScript knowledge.

It's not just my idea, I link out to all the smart people who have tackled this subject before throughout the years and made similarly simple and awesome demos.

Sponsor: Wufoo

Wufoo is a web form builder. It allows you to build any kind of form and then either link people to it, or embed it right onto your own website (with full design control!)

I just had someone ask me for advice on undertaking the job of building a huge multi-page application form. It had to be secure. It had to ask questions and go to certain pages depending on how to answer other questions. It had to work on mobile. It had to have good UX and clear validation.

I told him the truth: Use Wufoo. Honest to god I wouldn't even dream of building that myself. It's not that I'm not capable, but it would be a boatload of work to get right and be difficult to maintain. I'd rather knock it out in an afternoon on Wufoo, have the end product be better, and have access to everything else awesome that Wufoo provides.

Spoooooky CSS Selectors

Let's get into the spirit a little bit this year with some Halloween themed posts! I'll kick it off with some CSS selectors FROM BEYOND THE GRAVE. Er. CSS selectors that will CHILL YOU TO THE BONE. OK maybe not, but they will be at least kinda weird.

(more…)

What is the difference between CSS variables and preprocessor variables?

Variables are one of the major reasons CSS preprocessors exist at all. The ability to set a variable for something like a color, use that variable throughout the CSS you write, and know that it will be consistent, DRY, and easy to change is useful. You can use native CSS variables ("CSS Custom Properties") for the same reasons. But there are also some important differences that should be made clear.

(more…)

Why Do Websites Publish AMP Pages?

I cannot tell if you AMP will shake out to have been a good or bad idea for the web.

I can attempt to answer this question though: those sites don't care where you read them. They just want people to read them. Read them. Like them. Trust them. So when they have something to sell (in any sense of the word), they sell it. Losing that attention is more scary than losing direct traffic to one place it publishes. Without saying it in so many words, AMP is saying: you stand to lose that attention without this.

And of course it's not just AMP, there are loads of off-site places you can publish to. So many that I think publishers are saying: "whatever, just make it easy, and we'll blast our content wherever you want."

You Can’t Detect A Touchscreen

Stu Cox explains that there are a ton of ways you might think you can get a yes-or-no answer on whether a browser supports touch or not:

  • Width media queries
  • Touch-related DOM events
  • Touch-related APIs
  • Pointer media queries

The normal refrain around this is "there are devices that are both, so you'd be wrong on those," which is true, but it's actually more problematic than that. These testing methods are often just straight up wrong.

So:

For layouts, assume everyone has a touchscreen. Mouse users can use large UI controls much more easily than touch users can use small ones. The same goes for hover states.

For events and interactions, assume anyone may have a touchscreen. Implement keyboard, mouse and touch interactions alongside each other, ensuring none block each other.

On Style Maintenance

I was talking to a brilliant engineer friend the other day who mentioned they never get to build anything from the ground up. Their entire career has consisted of maintaining other people's (often quite poor) code.

In a perfect world, we'd all get to write code from scratch, it would work perfectly, and we would put it into a bin in the sky, never to be looked at by anyone again.

We all know that's not how it works. Code need to be maintained.

(more…)

The Challenge of Constructive Criticism and How to Get It

Something that has been on my mind lately is how we talk about the deliverables we work on as designers and developers. There are plenty of times when we want feedback on our projects and turn to our friends, co-workers, colleagues, Twitter, and all kinds of other people for their honest opinions about the quality of our work.

But this can be problematic. The feedback we get is often not what we hoped for. In some cases, it can feel personal, which is almost never what we hope for.

Managing the way we seek, request, and respond to feedback can have major implications on the end result of our work. This post will cover some tips and tricks for having those dialogues.

(more…)

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