Article Archives

Netflix for Designers

Envato Elements is the design industry’s first unlimited download subscription for digital assets, tailored to the needs of agencies, designers, marketers, and professionals. With over 9000 carefully curated fonts, graphics, mockups, templates and more you can save time whilst still creating beautiful design projects.

Join the thousands of subscribers already enjoying unlimited monthly downloads, broad commercial use licensing and the ability to cancel at any time - no strings attached.

Browse the library now!

A Favor for Your Future Self

Alicia Sedlock, on removing a large section of a website:

... it’s the ultimate “I really hope this doesn’t break something else” situation. It was a stressful and tedious effort of triple checking that the things we were removing weren’t dependencies elsewhere. To be honest, we wouldn’t have been able to do this with any amount of success or confidence without our test suite.

Tests don't just help you when you change code or write new code, then help when …

11 comments

Lazy-Loading Disqus Comments

Lately, I've been obsessed with optimizing performance through lazy-loading. Recently, I've written on how to lazy-load Google Maps and on how to lazy-load responsive Google Adsense. Now it's time for Disqus, a service for embedding comments on your website. It's a great service. It eliminates the headache of developing your own local commenting system, dealing with spam, etc. Recently, I've been working on implementing the widget in one of my projects.…

5 comments

Prerender on hover?

InstantClick is a pretty popular JavaScript library (4,344 stars, as I type). This is the gist:

Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). InstantClick makes use of that time to preload the page, so that the page is already there when you click.

You hover a link, it Ajaxs for that page and prerenders it. On click, it replaces the <body></body>

EOL Firebug

The Firebug extension isn't being developed or maintained any longer. We invite you to use the Firefox built-in DevTools instead.

Looks like the end of an over 2 year process.

Firebug was probably the single most important tooling advancement in front-end developments short life. A glimpse of the future, indeed.…

CSS-Tricks Chronicle XXIX

A round up of goings-on related to me, this site, and related projects, as we are wont to do once in a while. I've had the good fortune of being a guest on a number of podcasts lately, so I'll link up those. I'll share some upcoming conferences I'll be at and news from CodePen and ShopTalk Show. …

CSS Grid!

Eric Meyer, talking to himself:

How long until I can actually use Grid, then? Two or three years?

March 2017. So about four months from now.

Grid sounds like tables 2.0. I thought we all agreed tables for layout were a bad idea.

We agreed table markup for layout was a bad idea…

12 comments

The Simplest (and Most Performant) Way to Offer Sharing Links for Social Media

This past summer, I wrote The Essential Meta Tags for Social Media about how developers can prepare web pages to optimize their appearance when shared on social media. But what about creating the links to let users share these web pages? Facebook, Twitter, and LinkedIn offer numerous ways to do this, some involving button generators and others that require external JavaScript. To avoid all of that, though, you can create your own links to share web pages. And the best …

An SVG That Isn’t All… SVG

SVG is absolutely a vector graphics format. But it's more than that. You can set type in it. You can place raster graphics in it. There is interactivity and animation. It's more like a multimedia graphics format. Over on the Media Temple blog, I walk through the creation of a multimedia graphic to show off some of those possibilities.

See the Pen SVG is a cross-medium format! by Chris Coyier (@chriscoyier) on CodePen.

If we get SVG …

State of the Word 2016

Some highlights-of-highlights, based on Brian Krogsgard's post:

  • BuddyPress and bbPress will get new support and engagement over the next year.
  • WordPress 4.6 was available in 50 languages the day it was released.
  • the REST API [endpoints] get included in WordPress 4.7.
  • WordPress.com is now fully on PHP7. WordPress.org will now recommend PHP7 by default.
  • There is some concern about design. "If WordPress doesn’t make changes to the interface and otherwise, [Matt Mullenweg would] expect WordPress marketshare to begin to decline

Web Animation Essentials: CSS Animations and Transitions

A brand new course by Rachel Nabors. There is a lot here: learning the code and learning the tools to help work with the code and make sure you're doing a good job. A couple favorite aspects of the course:

  • Captioned videos you can understand without audio.
  • Convenient CodePen exercises–no code to set up.

;)…

Radios and Checkboxes on GOV.UK

An interesting journey of form UX, documented by Tim Paul. It started with browser defaults. It's unclear why that wasn't working. But interestingly, an alteration that included giant label-based click areas in color-offset boxes didn't help. What actually helped was bigger (and custom) radios and checkboxes.

So far they’ve tested really well. In research, people of all confidence levels are clicking these controls quickly and easily.

I used to think the size of SurveyMonkey radios was awkwardly large. Now …

$1,076,940

High five to Dave Gandy and the Font Awesome team:

The Font Awesome 5 Kickstarter raised $1,076,940 with 35,549 backers, making it the most funded and most backed software Kickstarter of all time.

What's do the funders get? 1,000 more icons, icon font ligatures (a uniquely cool thing fonts can do, like turn "right arrow" into ➡, which can be an accessibility win), and, drum roll please, an SVG framework that will be open sourced. …

9 comments

Loops in CSS Preprocessors

If you've ever watched old sci-fi flicks, you know how powerful loops can be. Feed your robot nemesis an infinite loop, and kaboom. Robo dust.

Preprocessor loops will not cause dramatic explosions in space (I hope), but they are useful for writing DRY CSS. While everyone is talking about pattern libraries and modular design, most of the focus has been on CSS selectors. No matter what acronym drives your selectors (BEM, OOCSS, SMACSS, ETC), loops can help keep your …

We Asked 8,500 Internet Commenters Why They Do What They Do

Read Christie Aschwanden's first paragraph. If you've written anything that elicits comments, I'm sure you can relate.

There is plenty of data here to digest, and also further speculation:

I had a hypothesis: Maybe this commenting-without-reading phenomenon represents a variation of the backfire effect, in which a person who receives evidence that their belief is erroneous actually becomes more strongly convinced of the viewpoint they already held. In this case, the reader sees a headline that catches their interest and …

We’re All Frauds

Gina Trapani:

On a daily basis I’m struck by the fact that no number of degrees—or titles, or companies, or years experience, or apps shipped, or books published, or Twitter followers—matter when you’re facing down a situation that’s completely new. You think it through, you consult your trusted advisors, you do your best, and maybe you write down what you learned. That’s just about all you can do. Because you don’t know what you’re doing, and neither does anyone else.…

19 comments

Input Masking

I don't have any UX research to cite, but anecdotally, I like it when inputs that expect data in a specific format use an input mask. I thought I'd just line up a few demos for really easy reference.…

3 comments

Experimenting with Color Fonts

Over the past couple of weeks there’s been a lot of excitement over color fonts. Adobe describes the technology like this:

OpenType-SVG is a font format in which an OpenType font has all or just some of its glyphs represented as SVG (scalable vector graphics) artwork. This allows the display of multiple colors and gradients in a single glyph. Because of these features, we also refer to OpenType-SVG fonts as “color fonts”.

Back in March, Roel Nieskens wrote about …

5 comments

Creating a Cache-aware HTTP/2 Server Push Mechanism

If you've been reading at all about HTTP/2, then you've likely heard about server push. If not, here's the gist of it: Server push lets you preemptively send an asset when the client requests another. …

I totally forgot about print style sheets

Manuel Matuzovic rediscovers @media print {} styles.

The first thing he shows in this article is a tweet by Aaron Gustafson in which Indiegogo's website is pretty jacked up for print. It basically looks like a site in which none of the CSS loads at all, which is probably because they wrap all their styles in @media screen {}, or use <link rel="stylesheet" media="screen" href="style.css">. That's fine if you intend to take a "start from scratch" approach …

10 comments

Sentence Length Colorization

I think I had the same wooahhhhh coool reaction as so many others did when this tweet was going around:…

one comment

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 …

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, …

2 comments

High Contrast, A PostCSS Plugin Story*

The following is a guest post by Eduard Pochtar from ShiwaForce. Eduard is going to walk us through they why and how of a plugin he and his team built to process existing CSS to make a high contrast version of a web site. It involved a little thinking and a little strong arming to make it happen.

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

10 comments

Polyfill JavaScript Only When You Need To

The following is a guest post by Pascal Klau, a trainee from South Germany, who dislikes unnecessary HTTP requests and broccoli. Pascal is going to explain way to use a polyfilling service in such a way that you might get away with not using it at all.

13 comments

Swapping State with CSS Keyframes

Say you want an element to be in one state for 9 seconds, and in another state for 1 second, on a loop.

No tweening between the state, just a straight swap.…

10 comments

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 …

6 comments

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 …

Between the Wires

A new interview series from Preethi Kasireddy and Vivian Cromwell, focusing on "how developer products are made". I was honored to be lucky number three, in which I overshare about CodePen.…

8 comments

Color Fonts

Adobe explaining:

OpenType-SVG is a font format in which an OpenType font has all or just some of its glyphs represented as SVG (scalable vector graphics) artwork. This allows the display of multiple colors and gradients in a single glyph. Because of these features, we also refer to OpenType-SVG fonts as “color fonts”.

Support so far: Firefox 26+, Edge 38+ …

11 comments

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 …

5 comments

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 …

3 comments

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 …

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, …

12 comments

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!…

17 comments

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 …

11 comments

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 …

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 …

12 comments

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

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 …

4 comments

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 …

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 …

18 comments

My Increasing Wariness of Dogmatism

A couple of definitions, if you are unclear:

1:

Positiveness in assertion of opinion especially when unwarranted or arrogant.

2:

The tendency to lay down principles as undeniably true, without consideration of evidence or the opinions of others.…

We have a pretty good* newsletter.