How to: Back-to-top button without scroll events

Web developers: here’s an alternative way to build UI features that rely on scroll position without actually observing scroll events. Using the Intersection Observer API we can know when an element enters or leaves the viewport and respond in a way that’s much more performant.

It’s a very, very, bad idea to attach handlers to the window scroll event.

— John Resig, Learning from Twitter

You probably don’t have to be reminded of this but there are few other options when you want an element to behave like the back-to-top button we recently added to Basecamp. Here’s how it looks:

The back-to-top button appears and disappears as-needed

The design dictated that the button wouldn’t always be visible but rather just when you most need it. That meant only on pages that require scrolling at all and only after you’ve scrolled a good amount — at least a couple of screens.

Enter Intersection Observer

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport.

Perfect! Since we only want to know when the user has scrolled a couple of screens we just need an element in the DOM that’s the right height to observe. When that element leaves the viewport we’ll reveal the button.

Here’s how it works 

The mark-up has two elements: the button and its container.

<div class=”back-to-top-container”>
  <button class=”back-to-top--button”>Back to top</button>
</div>

Keep reading

Why I ignore the design industry on purpose

I’ve been a designer for nearly twenty years now (😮), with the last seven years spent happily at Basecamp. I enjoy my work and I care about it a lot.

Since I’ve been doing this for a long time, occasionally people ask me to predict next year’s big trends, or reflect on some industry controversy that’s been brewing.

That’s when I have to sheepishly admit: I pay almost no attention to what’s going on in the design industry. I don’t hang out on Dribbble or Product Hunt. I don’t read Hacker News. I don’t go to design conferences or Creative Mornings. I don’t look at inspiration sites or read designer blogs or tweets. I’m also not out there networking, hustling to make connections, hard-selling my personal brand, or fighting to stay on top of the game.

…I guess I’m kind of a professional hermit?

Keep reading

Signal v Noise post from the year 2000. The more things change, the more they stay the same 😂

Signal v Noise exits Medium

Three years ago we embraced an exciting new publishing platform called Medium. It felt like a new start for a writing community, and we benefitted immensely from the boost in reach and readership those early days brought. But alas it was not to last.

When we moved over, Medium was all about attracting big blogs and other publishers. This was going to be a new space for a new time where publishers could find a home. And it was. For a while.

These days Medium is focused on their membership offering, though. Trying to aggregate writing from many sources and sell a broad subscription on top of that. And it’s a neat model, and it’s wonderful to see Medium try something different. But it’s not for us, and it’s not for Signal v Noise.

Keep reading

Every little bit helps

Quitting Facebook. Renouncing Uber. Avoiding Amazon. There have never been more or greater reasons for turning your back entirely on much of Big Tech.

The last few years have brought an endless stream of scandals and unflattering revelations. There aren’t many starry-eyed optimists left who still believe that Silicon Valley is just here to build a better world. We’ve almost all come to accept the fact that Big Tech is here less to help the world and more to devour it.

If you’ve reached a similar conclusion, the natural dichotomy is one of apathy vs revolt. And let’s face it, apathy is the far more common out. What am I, in my lonely being, able to do in the face of such power and abuse? Best not to think about it too much, and – will you look at that! – these companies are experts at helping you not think about the structure and stranglehold of their businesses.

Revolt: deleting your accounts, swearing off the services, advocating for alternatives, is draining and even isolating work. No wonder most people can’t fit in such a fight in their daily routines of anxiety. Quitting cold turkey ain’t no feast.

But these aren’t the only options! You don’t have to either resign yourself to your utter insignificance or don a cape while shouting in the wind. There’s power in the margins. Tremendous power.

Keep reading

Down in front!

Doug gets it, most don’t.

Look around YouTube at car reviews, and you’ll see a lot of people standing in front of cars. Below I’ve snapped captures of early frames in six car reviews. These represent the first time the car is shown whole, in profile.

Who’s on review here? The car reviewer or the car? Get out of the way people!

Take it from Doug DeMuro. His reviews always start with him standing behind the car. The car is in full view, in all its glory, at center stage. Doug comes second — he understands what the viewer is there for.

Doug in the background. Car in the foreground. Doug gets it.

True brand awareness

Fantastic branding

It’s been said that your name is your favorite word. Likewise, a brand’s name is its favorite word. Pair their name with their logo, and it’s a self-love fest.

You can see this play out when you order a physical product from an online store. The shipping box is often branded. Sometimes the tape is even branded. Then once you tear into it, the internal packaging is branded. Then the item, too — often in multiple places. Name, logo, name, logo, name, logo.

There’s nothing inherently wrong about this. Many brands use shipment packaging as advertising. And it’s nice to know when you ordered something from Brand A, and a box from Brand A is waiting for you on your doorstep when you get home.

Except when it’s not for you.

Keep reading

Become A Facebook-Free Business

If Facebook’s endless privacy scandals have shown one thing, it’s that the company has far too much data on its users, and that they can’t be trusted not to sell, barter, or abuse that data whether for profit, growth, or negligence.

While individuals have long been rallying around #DeleteFacebook, there hasn’t been a comparable campaign for business. Enter: The Facebook-Free Business.

Being a Facebook-Free Business means your customers can trust that you aren’t collaborators with the Facebook machine. That when you spend your money with a Facebook-Free Business, none of that money will find its way back to Facebook’s coffers.

The rules are pretty simple. Being Facebook Free means:

  1. We do not buy advertisement on Facebook, Messenger, Instagram, or WhatsApp.
  2. We do not use Facebook, Messenger, Instagram, or WhatsApp to promote or represent our business or to communicate with our customers.
  3. We do not assist Facebook in its data collection regime through use of Facebook social Like buttons or by offering Facebook logins.

In short, that the business does not use Facebook or its subsidiaries in any way shape or form to operate, further, or conduct itself.

Keep reading

How about fixing the workplace rather than avoiding it at 4am?

Oh those superhuman CEOs who get up at 4am for that killer start to the day! Aren’t they just amazing? Such sacrifice, such grit, such tenacity.

Such fucking bullshit.

If you’re the CEO, and you can’t get work done at work, you only have one person to blame for it: Yourself. There’s no law of nature that dictates that it should be impossible to get deep work done at 11am or 2pm, just habits, values, and policies.

It’s your job to fix the damn workplace, not run away from it. Stop playing calendar Tetris with a whole organization. Stop loading up on meetings. Stop demanding endless status reports. Stop interrupting everyone all the time with shit that can wait.

Organizational dysfunction, such as the inability to get work done at work during regular work hours, is a reflection of executive habits and beliefs. Work isn’t crazy because of the nature of its being. Work is crazy because you’re making it crazy!

But it’s hard to fix that which you don’t know is broken. So let me spell it out: Having to get up at 4am to get real work done is broken. Busted. Kaput.

And it isn’t any less broken because a fawning business media keeps exalting the virtues of your morning routine or strict regiment. Quite contraire.

You know what’s cool? Getting to work at 9, putting in eight solid hours, and then being done by 5. There’s nothing stodgy or uncool about having reasonable work day that allows for a workout at 7:30am or playing with your kids at 5:30pm.

There’s no prize for being the first to rise. You’re not a fucking bird and there ain’t no fucking worm. So chill. Set a good example for your organization. Make calm a mission. Start getting work done at work again.