Article Archives

12 comments

An Intro to Bedrock for WordPress

The following is a guest post by Alessandro Vendruscolo, who wrote to me excited to write a guest post about a WordPress tool that I didn't know much about: Bedrock. It's not a theme, it's a way to install, configure, and manage WordPress with security and modern development practices in mind.

Reducing JPG File size

There’s lots of neat tricks for reducing the size of JPGs in this article by Colt McAnlis:

With the Average webpage size now larger than the original DOOM game, you have to start asking where all the bytes are coming from, and how you can do more to toss those things out.

While JPG compression is impressive in its’ own right, how you use it in your application can influence the size of these files significantly. As such I’ve assembled …

11 comments

Tips for Aligning Icons to Text

Icons. They're popular. They help complement content (most of the time). And yet they can be a pain in the neck.

Once you've decided on a format (SVG or icon font?) and designed the set, there are still other considerations, many of which pop up while you're coding.…

18 comments

An Intro to Google Tag Manager

The following is a guest post by David Attard. I only recently became aware that Google Tag Manager was a thing, but didn't know exactly what it was, what it did, or why I might care to use it. Thankfully David stepped up here to explain it, so now we all can understand it. Take it David!…

Sponsor: ​Become an Industry-Ready Developer at Galvanize

​At Galvanize, you'll learn the programming skills and problem-solving techniques companies seek when hiring developers. Our full-time immersive web development course six months long and designed to prepare you as a full-stack developer on a software team. Our graduates pursue roles with some of the most exciting and innovative tech companies as full-stack software developers, quality assurance engineers, front-end developers, and product managers. Scholarships and financial aid are available for qualified students. Start your future career, today.

23 comments

Flexbox and Truncated Text

Situation: you have a single line of text in a flex child element. You don't want that text to wrap, you want it truncated with ellipsis (or fall back to just hiding the overflow). But the worst happens. The unthinkable! The layout breaks and forces the entire flex parent element too wide. Flexbox is supposed to be helping make layout easier!

Fortunately, there is a (standardized) solution. You just need to use a non-flexbox property/value to do it.…

one comment

Answers from AMA on Hashnode

I recently did an AMA on Hashnode and it was lots of fun! I enjoyed the questions and the simple format. I figured I'd plop some of my answers here in the spirit of blogging.…

Buttons in Design Systems

I really like this post by Nathan Curtis where he discusses how buttons can be applied to a design system:

I love buttons. I can do things with buttons. Take a next step. Make a commitment. Get things done. With buttons, interaction springs to life.

That’s why Buttons are arguably a design system’s most important component. Devilishly simple, they offer a simple label in a defined region I can press. As such, buttons are where you apply a design …

21 comments

Optimizing for Large-Scale Displays

The following is a guest post by Jon Yablonski. Jon told me he recently worked on a project where there was a lot of emphasis placed on giant screens. Jon is going to show us that just like RWD work of any kind, it requires planning. Extra media queries are useful for targeting the huge displays, and typography can take you far.

CSS from the Future

Zeke Sikelianos:

So. We have variables in CSS now. That's pretty neat, but it doesn't get us all the way to CSS heaven. What we really need is a way to write little bits of reusable CSS. These features have long existed in Sass, Less, and Stylus, but there's no way to do it in regular CSS.

There’s plans for adding a new spec for what’s currently being called the @apply rule. It looks like a Sass mixin, but …

Updating Our Prefixing Policy

WebKit will no longer release experimental features with prefixes (i.e. -webkit-font-smoothing) as many have found that this can actually quite harmful:

Over time this strategy has turned out not to work so well. Many websites came to depend on prefixed properties. They often used every prefixed variant of a feature, which makes CSS less maintainable and JavaScript programs trickier to write. Sites frequently used just the prefixed version of a feature, which made it hard for browsers to drop …

8 comments

The Advice For Going Freelance Is Very Consistent

I caught wind of a friend making the transition from in-house designer to freelancer or proprietor of a small design studio and looking for advice. I've never truly done the freelance thing, so I outsourced the advice thing to y'all on Twitter. It's surprising how consistent the advice is, when distilled.…

Web Fonts for President 2016

Zach Leatherman digs under the cover of the presidential candidates’ websites and reveals that font loading is a nuanced and complicated business:

Using a web font service doesn’t necessarily mean that your web site will use best practices. We must be knowledgeable about the internals of the tools we use in order to best utilize them to our advantage. At the end of the day if you don’t want to put any effort into it, it’s safer to use TypeKit. …

11 comments

Options for Building Web Forms

There are plenty of form building services, plugins, and frameworks in the wild that make the tedious task of form design and development much easier. We're going to look at some of those in this post.…

6 comments

So you want to make a PostCSS plugin

The following is a guest post by Marcus Tisäter. I think there are a lot of us out there that find PostCSS kind of fascinating. Especially from the perspective of potentially being able to write our own plugins, in JavaScript, that transform CSS in any way we want. But where to begin? How do you do a good job? Marcus explains.

41 comments

A Comparison of Animation Technologies

The question I am asked most frequently: what animation tool do you recommend?

Having worked with a slew of them, I can tell you there is no right answer. It's a complicated question and complicated answer. This post serves to clarify what to use, and when, to get you working with the right tool for the job.

If you’re here for React, we’ve got you covered! Jump down to the React section below and we’ll break down what to …

23 comments

Icons and Teams

Say you're working on a website that uses an icon system. Lots of people who work on the site interact with the icon system. Designers create new icons, they tweak existing ones, they have ideas on what they want the icons to do. Developers building out the pages of the site use the system.

Say you're the front-end developer. You're implementing this system. You're the middle man. You're the creator and consumer of this system.

What do you ask of

6 comments

Working with Images in Stylesheets with PostCSS

The following is a guest post by Aleks Hudochenkov. Aleks does a great job here of showcasing what PostCSS is good at and the role it has grown into in the front end stack. That is: doing little useful jobs within CSS. You're about to see a variety of PostCSS plugins at work that are all related to working with images. By the end, I bet you'll be able to imagine how PostCSS can be useful for other niches

CodePen Embedded Pen Upgrades

They now:

  1. Have an all-new design that allows for a split-view (code on the left, preview on the right) when the responsive design allows.
  2. Can be editable.

Along with all the same great features they have always had like themes (total design control! change all your embeds at once!) and optional click-to-play (for increased performance). …

3 comments

Visual Regression Testing with CSS Blend Modes

Last week I saw Una Kravets give a very inspiring talk at Generate Conf about using CSS Filters and Mix Blend Modes. One demo in particular got my attention because Una showed us how we could overlay two layouts on top of each other and use blend modes to spot all the differences between them.

I was pretty excited about this idea and got to thinking: could we create visual regression testing with just one line of CSS? Turns out …

2 comments

A Quick Look at the Runner Sketch Plugin

Runner is a plugin for the design tool Sketch. It lets you use your keyboard to run commands and order about other plugins. For example, by typing “vertical” into Runner then you can vertically align text much faster than moving your mouse to the button and clicking it.

I’ve seen some folks describe Runner as if it’s Sketch’s version of Spotlight or Alfred, as effectively their goals are one and the same: to speed up and organize your workflow. …

Lingo

Lingo is an app from the Noun Project team that groups images, icons, SVGs, and illustrations into a single place. It lets you browse them quickly, and then you can drop them into another application without any hassle.

I work a ton with SVGs and icons, so I'm always trying to find ways to reduce friction between different software and editing processes. One might think that the answer to this couldn't be more software, but I'm really enjoying Lingo. In …

Popper.js

Speaking of tricky things to get right: tooltips!

Tooltips need to be particularly self-aware, so they don't stick out someplace where they can't be read. Then continue to be smart as the page state changes, like is resized or scrolled. Popper.js looks like it handles all this stuff nicely.

The project page doesn't say this, but creator Federico Zivolo showed me how it's also friendly with React, because you can render the tooltip element itself within the component and it …

Modaal

Modaal is a WCAG 2.0 Level AA accessible modal window plugin.

Modals seem so hard to get right from an accessibility perspective, I'm not proud to say I've never tried. Something like moving focus to the modal when it opens and moving focus back to where it was when the modal closes seems like a particularly tricky thing to get right.…

25 comments

Poll Results: “front-end” and “front end”

The latest poll around here kicked off asking how you prefer spell this job we all do around here: frontend? front end? Front-End?

I asked because 1) I didn't know if there was a "right" answer 2) Even if there is a right answer, it doesn't seem adhered to.…

17 comments

Lint your CSS with stylelint

The following is a guest post by David Clark. David is the co-creator of a thing called Stylelint, a tool for keeping your CSS in shape. He does a great intro as to why you might need it himself, so take it away David...…

2 comments

Creating Wavescroll

The following is a guest post by Nikolay Talanov. Nikolay wrote in to show me this demo and wanting to write about it (his first post in English, ever!). It's an awesome demo, so of course I'm happy to pass it off to him now to take you through it. And make sure to check him out on CodePen too, he makes all kinds of other incredible demos.

16 comments

The Ever-Evolving Spectrum of the Web

I wrote a post last summer where I identified myself as a web designer in light of my experience in front-end web development. The response was pretty overwhelming and has stuck with me ever since.

What stuck with me most is how relative job descriptions are in web development. I might be a web designer standing next to one person, but a web developer standing next to someone else. Creating exact labels (and job descriptions, for that matter) is an …

An Interview with Håkon Wium Lie

Håkon Wium Lie is one of the co-inventors of the original CSS specification. This interview digs into the past and future of CSS:

If CSS hadn’t been developed, designers might have gone elsewhere, explains Lie. HTML could have turned into more of a page description language, akin to PDF. Indeed, designers had already started making pictures out of their documents. “Because that meant you could control every pixel in there. So you could get the fonts, colours, you needed. You …

Introducing the new Framer

Framer, the design and code tool from Motif Tools BV, has been updated with lots of new features.

I guess it's Framer "js", because the designs you create are formed from a code syntax that is JavaScript-like. Kinda looks like JSON in CoffeeScript. It's CoffeeScript. But you're actually working in a native app.

It's a wild time for design tooling. Sketch had become a dominant player for screen design. Adobe knows designers don't turn to Photoshop like they used to …

20 comments

I, Website

There is a famous essay by Leonard E. Read called "I, Pencil". This is a homage to that.


I am a website — the ordinary website familiar to all people who use the internet.…

The dark side of Guardian comments

As part of a series on the rising global phenomenon of online harassment, the Guardian commissioned research into the 70m comments left on its site since 2006 and discovered that of the 10 most abused writers eight are women, and the two men are black. Hear from three of those writers, explore the data and help us host better conversations online

Nice to see some real research corroborate what so many people have felt to be be true.

This is …

Aligning Text Smartly in CSS

One of those bonafide CSS tricks. Vijay Sharma shows it’s possible to center align a single line of text, but if it wraps, left align the text. A small adjustment, but little tricks like this can help legibility.…

Should I use Grid or Flexbox?

Two sentences from Rachel Andrew that explain when to reach for which layout choice:

Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.

Flexbox can wrap, making it sorta-kinda two dimensions, but it still flows in a single dimension.…

Introducing iframify

Hugo Giraudel writes up why he created iframify, a script which grabs a DOM node and wraps it in an <iframe>. It’s a nifty tool for displaying components in a style guide at a certain width and effectively faking element queries.

An iframe being an inner document, media queries fire based on the width of the iframe rather than on the actual screen size. Which is what we want. Yay!…

Clarity 2016 Wrapup

My writeup of Clarity conference (the recent conference about style guides). Not comprehensive notes, just the things that resonated with me.…

A faster FT.com

Clever testing strategy from the team at Financial Times: they used blocking CSS in order to test people’s behaviour when they’re faced with a slow loading web page:

We wanted to understand how much the speed of our website affected user engagement, specifically, the quantity of articles read, one of our key measures of success. Using that data we then wanted to quantify the impact on our revenue.

If you’re looking for more interesting reading about performance and how it …

21 comments

Getting Started with CSS Modules

There isn’t one single approach with CSS Modules to making the JavaScript templates, the CSS files, or the build steps to make them work. In this post, which is part of a series on CSS Modules, we'll look at one approach. The goal of this post is to get a CSS Modules project up and running.

Article Series

Part 1: What are CSS Modules and why do we need them?
Part 2: How to get started with CSS Modules (You

ES6 module loading: More complicated than you think

Nicholas Zakas:

The differences between scripts and modules are subtle enough that it's hard for developers to understand the restriction of declaring what a JavaScript file represents ahead of time. My hope is that this post clarifies some of the reasons why it's not possible to autodetect modules from inspecting the source code and why tools such as ESLint ask you to specify the file type before executing. There will be a point in the future where ES6 modules are …

Sponsor: Flatiron School’s Online Campus

Flatiron School’s Online Learn-Verified program guarantees the same outcomes that Flatiron School has been delivering for years: a career as a Web Developer. This robust curriculum is designed to teach students to think, and build, like a software engineer. Join a thriving, global community of programmers so that you'll never need to go it alone. Get started with a free trial by taking the Intro to Programming course, then apply for the Learn-Verified program to be considered for a spot.…

28 comments

Changing the Cursor with CSS for Better User Experience (or Fun)

CSS can control the appearance of a cursor. There are a ton of options available to us and we've covered them pretty thoroughly in the ol' Almanac here on CSS-Tricks.

Still, it's easy to overlook cursors and their impact on the user experience of our sites. Remember when we learned ::selection was a thing and every site started using it to personalize the background color of text selections? Customizing cursors is just as easy and adds that extra bit of …

CSS containment

Michael Scharnagl breaking down the new contain property:

If you build simple sites without tons of DOM nodes and widgets you probably don’t have to care about CSS containment. On the other hand, if you build more complex sites CSS containment will help to optimize the performance. It is also a good idea to set contain: strict; for third-party widgets to protect the performance of your site.…

67 comments

What are CSS Modules and why do we need them?

I’ve been intrigued by CSS Modules lately. If you haven't heard of them, this post is for you. We'll be looking at the project and it's goals and aims. If you're intrigued, stay tuned, as the next post will be about how to get started using the idea. If you're looking to implement or level up your usage, part 3 will be about using them in a React environment.…

Resilience

Jeremy Keith’s talk from last year’s ColdFront conference is all about the fragility of the modern web. Jeremy talks about languages, such as Javascript, that have a “fragile error handling model” and why simple markup is much more resilient and error prone in comparison.

He has three principles for being a good citizen of the web:

  1. Identify core functionality of your website.
  2. Make that available using the simplest technology.
  3. Enhance!

Bonus conference talk! Our own Sarah Drasner at ForwardJS Summit …

Introducing React Storybook

Arunoda Susiripala:

With React Storybook, you can develop and design UI components outside your app in an isolated environment. It will change how you develop UI components.

Like a pattern library for stated React components.…

27 comments

Automating CSS Regression Testing

The following is a guest post by Garris Shipon. We've touched on the four types of CSS testing here before. Regression testing is the hardest. It's the type where you're trying to test if a change you made to CSS resulted in any unexpected visual problems. This is made more difficult with responsive designs. Garris built a tool for doing this as he embarked upon a new responsive design for a large scale site. Here, he'll walk you through

We have a pretty good* newsletter.