Article Archives

“the stone has been unstuck”

Matt Mullenweg, on the release of a new homepage for WordPress.org, which hasn't seen a redesign in a long time:

What’s on the page today actually isn’t that important, even though it’s better in many ways, the key is that it’s changing again, the stone has been unstuck and can now keep rolling.

I like that sentiment. With a redesign, sometimes it's not so much about the new pixels themselves, but the fact that a workflow is now in place for the work to continue.

Front-End Performance Checklist 2017

Vitaly Friedman's list includes a "Quick Wins" section with the web performance things that can't be ignored. If you aren't setting caching headers on assets, optimizing images, and gzipping, you're leaving some huge and easy performance gains on the table. After you've covered those, then you can dig into Brotli, OSCP, tree-shaking, and whatnot.

Speaking of which, I should really look into Brotli, OSCP, tree-shaking and whatnot.

Exporting Images in Multiple Resolutions Simultaneously

No surprise to any of y'all: screens come in a whole lot of different sizes and pixel densities these days. The technology behind dealing with that is catching up. For example, responsive images. So, we need software to help us generate those many versions of images we need.

Thankfully, all the most popular design software is starting to accommodate that need. Adobe Photoshop, Adobe Illustrator, Sketch, and Affinity Design all have pretty solid workflows for doing just that. I cover all those in this post over on the Media Temple blog.

Cars with Broken Windshield Wipers

I was stopped at an intersection the other day. It was raining. The road on the other side sloped upwards, so I could see the stopped cars on the other side of the road kind of stadium-seating style. I could see all their windshield wipers going all at the same time, all out-of-sync with each other. Plus a few of them had seemingly kinda broken ones that flapped at awkward times and angles.

What does that have to do with web design and development? Nothing really, other than that I took the scene as inspiration to create something, and it ended up being an interesting hodgepodge of "tricks".

(more…)

Chrome Bias (and Finding Things To Like in Firefox)

Chrome has been my default browser for many years now, but I’ve been thinking that my familiarity with just one browser has become a problem. If I tend to design for a single browser, then I’ll start to make assumptions that those features are available for everyone. Then I’m likely to miss important differences between browsers which could introduce bugs into the codebase or influence the amount of time I spend designing a feature.

I’ve started to call this problem “Chrome Bias”, and over the past week, I decided I would do something about it by switching to Firefox. This way I could figure out what’s new in one of the most popular web browsers out there. But! While I was running this little experiment of mine, I found three Firefox features that you might not know about if you suffer from extreme Chrome Bias like I do.

(more…)

Methods for Overriding Styles in WordPress

Let's say you manage a WordPress site. You chose, purchase, and install a pre-made theme. Say you added a few items you came across in the WordPress plugin directory to add some advanced features to the site. This is the awesomeness that is the WordPress ecosystem. It's relatively easy for anyone with light technical chops to get a website off the ground and wrangle together something powerful without having to build everything from scratch. It just works great and your website looks wonderful.

Until it doesn't.

(more…)

An Overview of Client-Side Storage

Ire Aderinokun:

There are currently four active methods for storing data on the client side.

  1. Cookies (old school, still useful because they are sent with server requests)
  2. Local Storage (very easy to use)
  3. Session Storage (exactly the same, only clears when the tab is closed)
  4. IndexedDB (quite complex, quite powerful)

Scaling Responsive Animations

Scaling our websites and applications so that they look great on every screen can be difficult. A big portion of that difficulty can be trying to get specific components, particularly ones that have pieces that have to stay a certain size (like animations), to look good regardless of the screen size. In this post, we'll cover how to help keep our responsive animations sized the way we want them.

(more…)

Alternatives to Placeholder Text

Andrew Coyle on when to use <input placeholder>:

  • Don't use them as a label
  • Don't use them as a secondary label
  • Don't use them as example input
  • Don't use them as helper text

Which amounts to pretty much: "Don't use them". Notice there are no examples of good use cases, and even the examples in the "Do" graphics just say "Placeholder Text", which isn't exactly demonstrative of usefulness.

I wonder if placeholder text will fall completely out of favor.

It reminds me of float labels. Float labels were a fun little fling, but they aren't actually useful. The reason you'd reach for them is when you're so space-limited that you can't show a regular label beside the input. But you can't actually ever remove the label, just move it. So if the label is still there and readable, why not just leave it there the whole time?

Propelling developer experience through configuration

Kevin Suttle on the ever-growing number of .dotfiles in projects:

The number of config files per repo is slowly but surely overtaking the number of code files.

Seems to me /config/ or /.config/ as a directory to keep them are also too overloaded to be a real solution. I agree: "something’s gotta give at some point."

That Fluid Type Stuff Again

There have been a couple of articles lately regarding fluid type.

Matt Smith (calling it "flexible type"):

My preferred approach for more flexible type is to calculate the font size based on the viewport height and width using the :root selector

Richard Rutter (calling it "Responsive Display Text"):

In one fell swoop you can set the size of a display heading to be proportional to the screen or browser width, rather than choosing from a scale in a series of media queries.

Both are all about leveraging viewport units to size type that doesn't jump from size to size at breakpoints, but gracefully scales.

I'd highly recommend checking out Mike Riethmuller's Fluid type though, which is nearly just as simple but allows for setting minimum and maximum sizes, which feels like the way to go for me.

(more…)

Why Inline SVG is Best SVG

📹 by Glen Maddern:

I don't think most front-end developers are as comfortable as SVG as they should be. It's one of the most powerful technologies available on the web.

He makes a very strong case for inline SVG, which I wholeheartedly agree with. This screen from the video does a nice job of that:

You could do worse in leveling up your SVG knowledge than picking up a copy of Practical SVG.

Client Email Helper

For all you freelancers out there, Jessica Hische has written some copy to help you articulate saying no to things you should be saying no to.

I’ve created this handy tool to help you say “no” to free and low-budget work and to help ask for more favorable contract terms before the start of a project.

Prefer `defer` Over `async`

Steve Souders:

Comparing the ASYNC and DEFER waterfalls, we see that using DEFER makes DOM Interactive fire sooner and allows rendering to proceed more quickly.

Even though <script async></script> is more commonly seen in the wild, defer is typically preferable as they can never block other syncronous scripts, as well as load in predictable source order.

[WebKit now has] HTML Interactive Form Validation

Chris Dumez:

WebKit did not support HTML interactive form validation, which occurs on form submission (unless the novalidate attribute is set on the <form> element) or using the reportValidity() API. We are pleased to announce that this is now implemented in WebKit and enabled in Safari Technology Preview 19. Upon interactive form validation, WebKit will now check the validity of all form controls in the form

Form validation in Safari has long been a bummer. It didn't even stop the submission of forms with invalid data. Hip hip hooray for that getting better! It will now prevent form submission and display a visual error:

I also only just heard about reportValidity(). It's just like checkValidity(), except that in addition to returning true or false about the validity, it also triggers the UI:

If there is at least one form control that violates a constraint, WebKit will focus the first one, scroll it into view, and display a bubble near it with a message explaining what the problem is.

See the Pen checkValidity vs reportValidity by Chris Coyier (@chriscoyier) on CodePen.

After creating that demo for testing, I saw Chris Dumez had already created his own.

I imagine this will trickle down to iOS at some point? Not sure how that works.

Google Analytics Can Show You Screen Resolution ≠ Browser Window

It was five years ago when I wrote Screen Resolution ≠ Browser Window. The idea was that, at the time, there was a lot of talk about monitor size in relation to how we design websites. JavaScript is happy to tell the dimensions of a monitor: screen.width. But how useful is that? Isn't it more useful to know how big the actual browser window is? Of course, it is. We don't write media queries based on screen.width, we write them based on the browser window width, e.g. @media (min-width: 400px) {}. (And perchance, someday, element/container queries.)

The fact that we can and do practice responsive design means that we have all but stopped worrying about what an "average" size browser is. Still, it's interesting data to have.

(more…)

CSS Shorthand Syntax Considered an Anti-Pattern

I remember Estelle Weyl used to mention this a lot in her talks. If you set .button { background: red; } you've, inadvertently or not, set a whole slew of other properties to their initial values. Harry Roberts demonstrates this clearly and goes so far to say it's a bad practice.

I don't avoid it, but I do actively think about it every time I'm about to use a shorthand. I think "I'm not just doing this to be lazy, I'm doing it because I actively want to set all these values." Plus, the bigger and more unfamiliar the codebase, the less likely I am to use shorthand.

How Do You Hire a Designer?

My friend Jeff just asked me this question. He was looking for a designer for a one-off graphic design job. He had the project all scoped out. He just didn't know how to do it. He's not a fool; he web searched around for stuff, but what you find doing that is a confusing mess with plenty of results that don't feel right.

I figured I'd document that journey here, and contrast it hiring an electrician. A trite comparison, perhaps, but as the light switch in my bathroom doesn't work right now and I'm actually in the process of hiring an electrician, it seems apt.

(more…)

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 you remove it, too. Seems to me testing has settled into the industry mindset as crucially important. As the year closes, I imagine managers worldwide are considering employees ability to write tests in their reviews.

This also reminds me of our unending quest to define "front-end development", a job description with skill requirements that get broader and broader every day. Testing is a unique skillset with its own learning curve. But if JavaScript is squarely in the front-end bucket, shouldn't testing that JavaScript also be?

This is also your yearly reminder that 24 ways has kicked off.

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.

(more…)

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> and <title></title> and changes the URL.

I just heard about it. Seems pretty smart. Progressive enhancement. Increased perceived performance. I can imagine one objection being bandwidth concerns. Downloading every page I hover over seems a bit bandwidth greedy.

It got me thinking though... isn't there a newfangled prerendering thing? (more…)

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.

(more…)

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

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 part is that it’s simple to do yourself. Here’s how.

(more…)

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 2, it'll be even more multimedia with the inclusion of audio, video, canvas, and more.

If you'd like to make SVG more of a part of you day-do-day workflow, and I suggest you do, pick up a copy of Practical 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 by 2018." and "In the coming releases, he, 'wants to see design leading the way.'"

Update: the video is now posted:


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 I think it's probably a smart move.

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

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 patterns more readable and maintainable, baking them directly into your code.

We'll take a look at what loops can do, and how to use them in the major CSS preprocessors: Sass, Less, and Stylus. Each language provides a unique syntax, but they all get the job done. There's more than one way to loop a cat.

(more…)

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 reminds them of something that they already know, which triggers them to think about their pre-existing knowledge or belief about the subject and then to blast it out to the world. The article they’re reading doesn’t inform them, it just provides an opportunity for them to reinforce (and broadcast) what they already know.

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.

The thing I find funny about Imposter Syndrome is that the symptom is you feeling inadequate, but knowing about the syndrome is a relief.

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 his experience building a color font and described the problem that they intend to solve:

Typography on the web is in single color: characters are either black or red, never black and red.

(more…)

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 to print styles. I generally prefer just not scoping screen styles and using a couple of print-scoped overrides (a "blacklist" instead of a "whitelist").

Manuel pointed out that you can use Chrome DevTools to emulate print media, which is pretty dang useful! Here's a quick video of that:


That screenshot of Indiegogo's site also goes to show how inline SVG (or any images, I suppose) can get a little crazy if you don't include any sizing information in the HTML. That prompted this tip:

Even if CSS does load and size those SVG's correctly, it might be helpful to have them sized approximately correct to begin with, to avoid what Sara Soueidan has dubbed 'Flash of Unstyled SVG'.

Remember that attributes like width and height are extremely easy to override in CSS. Setting them at all in CSS will override them. They aren't like inline styles.

Manuel's article is loaded with 12 other hot tips on things to include in a print stylesheet that you might not think of: preventing orphans, forcing colors to print correctly, displaying otherwise-hidden content, providing alternate content for things that won't print correctly, etc. Couple of other tips here.

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.

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