Focusing a `background-image` on a Precise Location with Percentages

Let's say you have an element with a background-image, where only part of the image is visible, because the image is bigger than the element itself. The rest is cropped away, outside the element.

Now you want to move that background-image such that you're focusing the center of the element on a specific point in it. You also want to do that with percentage values rather than pixels. We're going to have to get clever.

(more…)

font-display

The font-display property defines how font files are loaded and displayed by the browser. It is applied to the @font-face rule which defines custom fonts in a stylesheet.

@font-face {
  font-family: 'MyWebFont'; /* Define the custom font name */
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff'); /* Define where the font can be downlaoded */
  font-display: fallback; /* Define how the browser behaves during download */
}

(more…)

Photicular

I was on vacation this past week and at some little beach gift shop they were selling this really cool big thick book called Ocean: A Photicular Book. You've probably seen something like it before... a plastic card that shows different images depending on how you are looking at it. This book is extremely well done in that the image are very high quality, and the design of the book makes the images move as you turn the pages.

(more…)

ES6 modules support lands in browsers: is it time to rethink bundling?

Modules, as in, this kind of syntax right in JavaScript:

import { myCounter, someOtherThing } from 'utilities';

Which we'd normally use Webpack to bundle, but now is supported in Safari Technology Preview, Firefox Nightly (flag), and Edge.

It's designed to support progressive enhancement, as you can safely link to a bundled version and a non-bundled version without having browsers download both.

Stefan Judis shows:

<!-- in case ES6 modules are supported -->
<script src="app/index.js" type="module"></script>
<!-- in case ES6 modules aren't supported -->
<script src="dist/bundle.js" defer nomodule></script>

Not bundling means simpler build processes, which is great, but forgoing all the other cool stuff a tool like Webpack can do, like "tree shaking". Also, all those imports are individual HTTP requests, which may not be as big of a deal in HTTP/2, but still isn't great:

Khan Academy discovered the same thing a while ago when experimenting with HTTP/2. The idea of shipping smaller files is great to guarantee perfect cache hit ratios, but at the end, it's always a tradeoff and it's depending on several factors. For a large code base splitting the code into several chunks (a vendor and an app bundle) makes sense, but shipping thousands of tiny files that can't be compressed properly is not the right approach.

Preprocessing build steps are likely here to stay. Native tech can learn from them, but we might as well leverage what both are good at.

overflow-anchor

The overflow-anchor property enables us to opt out of Scroll Anchoring, which is a browser feature intended to allow content to load above the user's current DOM location without changing the user's location once that content has been fully loaded.

(more…)

Dealing with Spacing in Compiled Markdown Articles

Good thinking and exploration by Sebastian Eberlein. I'm a firm believer that you're doing yourself a favor if you blog in Markdown, because it gives you clean HTML output that isn't littered with classes very likely won't last forever.

Instead, why not use some clever CSS selectors (using stuff like adjacent sibling combinators) to get the spacing and styling you want without changing the markup. CSS is a lot easier to change than HTML. HTML within content, that is. HTML as part of templates is just as easy to change.

Come Learn and Take In Big Ideas at An Event Apart

I'm just back from An Event Apart Seattle, and it was fantastic. High five to y'all I got to run into there. Lots of big moments happen at An Event Apart. Microsoft took the opportunity to announce they are officially working on getting CSS grid into Edge, meaning full on cross browser compatibility for that, coming soon.

Ethan Marcotte was there, and before giving his excellent talk about patterns in design, told us that that very stage was the first time he ever uttered the words "responsive web design." See, An Event Apart has a pretty solid history of being a place where industry changing ideas seed and blossom.

Fortunately for all of us, there are five more shows this year:

  1. Boston, May 15-17
  2. Washington DC, Jul 10-12
  3. Chicago, Aug 28-30
  4. San Francisco, Oct 30-Nov 1
  5. Denver, Dec 11-13

I'll be giving my full-day session in Chicago!

Sketch Now Replicates Inside & Outside Stroke Alignment

I was just bemoaning strokes the other week:

And that's the trouble with text-stroke in CSS: you have no choice. It's center-aligned stroke only. Either of the other options [outside-aligned or inside-aligned], arguably, would have been more useful.

There still is no solution for text-stroke, but SVG has the exact same problem. It's not quite as design-ruining with SVG, since you can (and designers have been) design with center aligned strokes in mind with their vector art. Still, I'd say if we had stroke-align: [center, outside, inside]; we'd be better off.

Peter Nowell documents how Sketch now repositions the points of your shapes to replicate the different stroke alignments, if you explicitly chose those options in Sketch. Pretty useful! Since native SVG still only does center alignment, that would mean changing the stroke width after exporting would still be weird, but I suppose that's fairly rare.

The article notes how SVG 2 accommodates for aligned strokes, but that still feels a bit up in the air.

Say You Need a Persistent Data Store Entirely on the Client-Side

You got your localStorage. You got your IndexedDB. Those are both client side and capable of storing data, but they are limited to a single browser. I can't store data there from my laptop then come back later on my phone and have the same data. That's the kind of thing websites have back-end databases for. The data is stored elsewhere, so you have access everywhere.

But what if you don't want to deal with a back end? There are third-party solutions for this.

(more…)

Papercons

Bobby Grace, on the Dropbox Paper team:

On the engineering side, we use inline SVGs. These have many advantages. One advantage is that SVG is a well-structured format that we can manipulate with code. Paper is also using React and has a component for inserting icons.

They:

  1. Use a single Sketch file, checked into the repo, as the place to design and house all the icons.
  2. Use gulp-sketch to extract them all individually.
  3. The build script continues by optimizing them all and building a source of data with all the icons and their properties.
  4. That data fuels the their <SvgIcon /> React component. (Also see our article).

They call it Papercons.

Now, whenever someone asks for an icon, we can just share a link to all the latest production icons. No more hunting, context switching, and long conversation threads.

Debugging Tips and Tricks

Writing code is only one small piece of being a developer. In order to be efficient and capable at our jobs, we must also excel at debugging. When I dedicate some time to learning new debugging skills, I often find I can move much quicker, and add more value to the teams I work on. I have a few tips and tricks I rely on pretty heavily and found that I give the same advice again and again during workshops, so here's a compilation of some of them, as well as some from the community. We'll start with some core tenets and then drill down to more specific examples.

(more…)

Strangers in the Woods Together

In the latest episode of ShopTalk, Robyn Kanner told a story of interviewing for a UX job that stuck with me.

They asked her to create a social app for mountain bikers. Talk out how the app might work, sketch out some flows, you know, UX work. Exactly what they were expecting and what I would have done. But then Robyn turned the table on them and asked what they are going to do about saftey. This app is going to allow strangers to connect and meet in the woods together, how can you ensure their safety?

Geez. Seems obvious after she says it, but at the outset of the question it didn't seem so obvious. At least to a dude like me. As Mike Monterio put it, we're both big dudes who don't think twice about getting into a Lyft with strangers, but is top of mind for plenty of others. There are huge blind spots like this that affect our work.

Fabrica Dev Kit

Fabrica Dev Kit is a toolkit for WordPress development. You...

  1. Clone a GitHub Repo
  2. Configure your WordPress project (settings, plugins, etc) through a `.yml` file
  3. Run a Ruby setup script which
  4. Downloads dev dependencies (like Gulp) through npm or yarn
  5. Builds a Docker container and volumes to run everything inside of
  6. Everything, including the big WordPress dependencies like PHP and MySQL, and running inside Docker. The web server is Nginx and PHP-FPM

It goes a step further (more…)

Pong with SVG.js

Everybody loves the vintage game Pong, right? We sure do. What's more fun? Building it yourself!

That's why we decided to create one with SVG.js - to highlight some aspects of our library. It might seem like a complex idea for a small tutorial, but as you'll see, it's simpler than it sounds. Let's dive into it!

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag