making

Teaching : making a difference / Rick Churchill [and eleven others]

Churchill, Rick, author




making

Transformational professional learning : making a difference in schools / Deborah M. Netolicky

Netolicky, Deborah M., author




making

Why science and art creativities matter : (re-)configuring STEAM for future-making education / edited by Pamela Burnard and Laura Colucci-Gray




making

Imagining the future of climate change: world-making through science fiction and activism / Shelley Streeby

Hayden Library - QC902.9.S77 2018




making

Several intuitionistic fuzzy multi-attribute decision making methods and their applications / Zhinan Hao, Zeshui Xu, Hua Zhao

Online Resource




making

Making stars physical: the astronomy of Sir John Herschel / Stephen Case

Hayden Library - QB36.H59 C37 2018




making

Decision making under contraints / Martine Ceberio, Vladik Kreinovich, editors

Online Resource




making

Accounting for managers [electronic resource] : interpreting accounting information for decision-making / Paul Collier, Sandy Kizan ; with contributions by Eckhard Schumann

Collier, Paul M., author




making

Meet brand Arnab Goswami who is making news outside The Newshour

The 26/11 Mumbai terrorist attack in 2008 proved to be the turning point for him.




making

The making of the medieval Middle East: religion, society, and simple believers / Jack Tannous

Hayden Library - BL1060.T36 2018




making

Vital models: the making and use of models in the brain sciences / edited by Tara Mahfoud, Sam McLean and Nikolas Rose

Online Resource




making

Basics of animal communication: interaction, signalling and sensemaking in the animal kingdom / by Dario Martinelli

Hayden Library - QL776.M35 2017




making

Early evolution of human memory: great apes, tool-making, and cognition / Héctor M. Manrique, Michael J. Walker

Hayden Library - QP360.5.M36 2017




making

Mate choice: the evolution of sexual decision making from microbes to humans / Gil G. Rosenthal

Hayden Library - QL761.R574 2017




making

The republic of color: science, perception, and the making of modern America / Michael Rossi

Dewey Library - QP483.R67 2019




making

Making Oscar Wilde / Michèle Mendelssohn

Hayden Library - PR5823.M39 2018




making

TRAI recommends making set top boxes interoperability mandatory

Presently the STBs deployed in the Cable TV networks are non-interoperable - the same STB cannot be used interchangeably across the different service providers.




making

Reacher Said Nothing: Lee Child and the Making of Make Me


 
It had never been attempted before, and might never be done again. One man watching another man write a novel from beginning to end.
 
On September 1, 2014, in an 11th floor apartment in New York, Lee Child embarked on the twentieth book in his globally successful Jack Reacher series. Andy Martin was there to see him do it, sitting a couple of yards behind him, peering over his shoulder as the writer took another drag of a Camel cigarette and tapped

Read More...




making

Reacher Said Nothing: Lee Child and the Making of Make Me


 
It had never been attempted before, and might never be done again. One man watching another man write a novel from beginning to end.
 
On September 1, 2014, in an 11th floor apartment in New York, Lee Child embarked on the twentieth book in his globally successful Jack Reacher series. Andy Martin was there to see him do it, sitting a couple of yards behind him, peering over his shoulder as the writer took another drag of a Camel cigarette and tapped

Read More...




making

Filmmaking as Research [electronic resource] : Screening Memories / by Diane Charleson

Charleson, Diane, author




making

The Making of the Banlieue [electronic resource]: An Ethnography of Space, Identity and Violence

Slooter, Luuk




making

Remaking Sustainable Urbanism [electronic resource] : Space, Scale and Governance in the New Urban Era / edited by Xiaoling Zhang




making

Understanding Sociology : Making Sense of Sociological Theory [electronic resource]




making

Reacher Said Nothing: Lee Child and the Making of Make Me


 
It had never been attempted before, and might never be done again. One man watching another man write a novel from beginning to end.
 
On September 1, 2014, in an 11th floor apartment in New York, Lee Child embarked on the twentieth book in his globally successful Jack Reacher series. Andy Martin was there to see him do it, sitting a couple of yards behind him, peering over his shoulder as the writer took another drag of a Camel cigarette and tapped

Read More...




making

Reacher Said Nothing: Lee Child and the Making of Make Me


 
It had never been attempted before, and might never be done again. One man watching another man write a novel from beginning to end.
 
On September 1, 2014, in an 11th floor apartment in New York, Lee Child embarked on the twentieth book in his globally successful Jack Reacher series. Andy Martin was there to see him do it, sitting a couple of yards behind him, peering over his shoulder as the writer took another drag of a Camel cigarette and tapped

Read More...




making

Podcast: Why animal personalities matter, killer whale sanctuaries, and the key to making fraternal twins

Online News Editor David Grimm shares stories on a proposal for an orca sanctuary in the sea, the genes behind conceiving fraternal twins, and why CRISPR won’t be fixing the sick anytime soon.   Elizabeth Pennisi joins host Sarah Crespi to discuss bold birds, shy spiders, and the importance of animal personality.   [Image: Judy Gallagher]




making

Podcast: Saving grizzlies from trains, cheap sun-powered water purification, and a deep look at science-based policymaking

This week, we chat about why grizzly bears seem to be dying on Canadian railway tracks, slow-release fertilizers that reduce environmental damage, and cleaning water with the power of the sun on the cheap, with Online News Editor David Grimm. And David Malakoff joins Alexa Billow to discuss a package of stories on the role of science and evidence in policymaking[link TK]. Listen to previous podcasts.  [Image: tacky_ch/iStockphoto; Music: Jeffrey Cook]




making

Paying cash for carbon, making dogs friendly, and destroying all life on Earth

This week we have stories on the genes that may make dogs friendly, why midsized animals are the fastest, and what it would take to destroy all the life on our planet with Online News Editor David Grimm. Sarah Crespi talks to Seema Jayachandran about paying cash to Ugandan farmers to not cut down trees—does it reduce deforestation in the long term? Listen to previous podcasts. [Image: Kerrick/iStockphoto; Music: Jeffrey Cook]




making

Probing the secrets of the feline mind and how Uber and Lyft may be making traffic worse

Dog cognition and social behavior have hogged the scientific limelight for years—showing in study after study that canines have social skills essential to their relationships with people. Cats, not so much. These often-fractious felines tend to balk at strange situations—be they laboratories, MRI machines, or even a slightly noisy fan. Online News Editor David Grimm joins host Sarah Crespi to discuss several brave research labs that have started to work with cats on their terms in order to show they have social smarts comparable to dogs. So far, the results suggest that despite their different ancestors and paths to domestication, cats and dogs have a lot more in common then we previously thought. Also this week, host Meagan Cantwell speaks with Greg Erhardt, assistant professor of civil engineering at University of Kentucky in Lexington about the effect of ride-sharing services such as Uber and Lyft on traffic in San Francisco, California. His group’s work showed that when comparing 2010 and 2016 traffic, these services contributed significantly to increases in congestion in a large growing city like San Francisco, but questions still remain about how much can be generalized to other cities or lower density areas. This week’s episode was edited by Podigy. Download the transcript (PDF)  Ads on this show: KiwiCo Listen to previous podcasts. About the Science Podcast [Image: Thomas Hawk/Flickr; Music: Jeffrey Cook]




making

Fossilized dinosaur proteins, and making a fridge from rubber bands

Have you ever tried to scrub off the dark, tarlike residue on a grill? That tough stuff is made up of polymers—basically just byproducts of cooking—and it is so persistent that researchers have found similar molecules that have survived hundreds of millions of years. And these aren’t from cook fires. They are actually the byproducts of death and fossilization. Host Sarah Crespi talks with Contributing Correspondent Gretchen Vogel about how these molecules can be found on the surface of certain fossils and used as fingerprints for the proteins that once dwelled in dinos. And Sarah talks with Zunfeng Liu, a professor at Nankai University in Tianjin, China, about a new cooling technology based on a 100-year-old observation that a stretched rubber band is warm and a relaxed one is cool. It’s going to be hard to beat the 60% efficiency of compression-based refrigerators and air conditioning units, but Zunfeng and colleagues aim to try, with twists and coils that can cool water by 7°C when relaxed. This week’s episode was edited by Podigy. Ads on this week’s show: The Tangled Tree: A Radical New History of Life by David Quammen Download a transcript (PDF) Listen to previous podcasts. About the Science Podcast




making

Brickmaking bacteria and solar cells that turn ‘waste’ heat into electricity

On this week’s show, Staff Writer Robert F. Service talks with host Sarah Crespi about manipulating microbes to make them produce building materials like bricks—and walls that can take toxins out of the air. Sarah also talks with Paul Davids, principal member of the technical staff in applied photonics & microsystems at Sandia National Laboratories, about an innovation in converting waste heat to electricity that uses similar materials to solar cells but depends on quantum tunneling. And in a bonus segment, producer Meagan Cantwell talks with Online News Editor David Grimm on stage at the AAAS annual meeting in Seattle. They discuss how wildfires can harm your lungs, crime rates in so-called sanctuary states, and how factors such as your gender and country of origin influence how much trust you put in science. This week’s episode was edited by Podigy. Listen to previous podcasts. About the Science Podcast Download a transcript (PDF).




making

Making antibodies to treat coronavirus, and why planting trees won’t save the planet

Staff Writer Jon Cohen joins host Sarah Crespi to talk about using monoclonal antibodies to treat or prevent infection by SARS-CoV-2. Many companies and researchers are rushing to design and test this type of treatment, which proved effective in combating Ebola last year. See all of our News coverage of the pandemic here, and all of our Research and Editorials here. And Karen Holl, a professor of environmental studies at the University of California, Santa Cruz, joins Sarah to discuss the proper planning of tree-planting campaigns. It turns out that just putting a tree in the ground is not enough to stop climate change and reforest the planet. This week’s episode was produced with help from Podigy. Listen to previous podcasts. About the Science Podcast Download a transcript (PDF).




making

Multimedia : making it work / Tay Vaughan

Vaughan, Tay




making

Computing essentials 2017 : making IT work for you / Timothy J. O'Leary, Linda I. O'Leary, Daniel A. O'Leary

O'Leary, Timothy J., 1947- author




making

Decision-making for sustainable transport and mobility: multi actor multi criteria analysis / edited by Cathy Macharis (Professor, Vrije University Brussel-Research group MOBI (Mobility, Logistics and Automotive Technology), dep. BUTO, Belgium), Gino Baud

Rotch Library - HE305.D36 2018




making

Risk, choice, and uncertainty: three centuries of economic decision-making / George Szpiro

Dewey Library - HD30.23.S97 2020




making

Bending the law of unintended consequences: a test-drive method for critical decision-making in organizations / Richard M. Adler

Online Resource




making

The making of you: the incredible journey from cell to human / Katharina Vestre ; translated from Norwegian by Matt Bagguley ; illustrations by Linnea Vestre

Dewey Library - RG613.V4713 2019




making

A telephone for the world: Iridium, Motorola, and the making of a global age / Martin Collins

Dewey Library - HE7797.I75 C65 2018




making

Making Australian history : perspectives on the past since 1788 / [edited by] Deborah Gare & David Ritter




making

The making of the modern world : connected histories, divergent paths (1500 to the present) / senior author, Robert W. Strayer ; coauthors, Edwin Hirschmann, Robert B. Marks, Robert J. Smith ; contributing authors, James J. Horn, Lynn H. Parsons

Strayer, Robert W., author




making

The making of the modern world : encounters / Alan Macfarlane

MacFarlane, Alan, author




making

New Report Highlights the MacArthur Foundation’s Grantmaking Legacy to Advance Maternal Health in India

Mathematica released findings from its cumulative review of the John D. and Catherine T. MacArthur Foundation’s Maternal Health Quality of Care (MHQoC) strategy in India.




making

Making ecologies on private land: conservation practice in rural-amenity landscapes / Benjamin Cooke, Ruth Lane

Online Resource




making

Making a Better Custom Select Element

Julie Grundy kicks off this, our fifteenth year, by diving headlong into the snowy issue of customising form inputs. Nothing makes a more special gift at Christmas that something you’ve designed and customised yourself. But can it be done while staying accessible to every user?


In my work as an accessibility consultant, there are some frequent problems I find on people’s websites. One that’s come up a lot recently is that people are making custom select inputs for their forms. I can tell that people are trying to make them accessible, because they’ve added ARIA attributes or visually-hidden instructions for screen reader users. Sometimes they use a plugin which claims to be accessible. And this is great, I love that folks want to do the right thing! But so far I’ve never come across a custom select input which actually meets all of the WCAG AA criteria.

Often I recommend to people that they use the native HTML select element instead. Yes, they’re super ugly, but as Scott Jehl shows us in his article Styling a Select Like It’s 2019 they are a lot easier to style than they used to be. They come with a lot of accessibility for free – they’re recognised and announced clearly by all screen reader software, they work reliably and predictably with keyboards and touch, and they look good in high contrast themes.

But sometimes, I can’t recommend the select input as a replacement. We want a way for someone to choose an item from a list of options, but it’s more complicated than just that. We want autocomplete options. We want to put images in there, not just text. The optgroup element is ugly, hard to style, and not announced by screen readers. The focus styles are low contrast. I had high hopes for the datalist element, but although it works well with screen readers, it’s no good for people with low vision who zoom or use high contrast themes.

Figure 1: a datalist zoomed in by 300%

Select inputs are limited in a lot of ways. They’re frustrating to work with when you have something which looks almost like what you want, but is too restricted to be useful. We know we can do better, so we make our own.

Let’s work out how to do that while keeping all the accessibility features of the original.

Semantic HTML

We’ll start with a solid, semantic HTML base. A select input is essentially a text input which restricts the possible answers, so let’s make a standard input.

<label for="custom-select">User Type</label>
<input type="text" id="custom-select">

Then we need to show everyone who can see that there are options available, so let’s add an image with an arrow, like the native element.

<label for="custom-select">User Type</label>
<input type="text" id="custom-select">
<img src="arrow-down.svg" alt="">

For this input, we’re going to use ARIA attributes to represent the information in the icon, so we’ll give it an empty alt attribute so screen readers don’t announce its filename.

Finally, we want a list of options. An unordered list element is a sensible choice here. It also lets screen reader software understand that these bits of text are related to each other as part of a group.

<ul class="custom-select-options">
  <li>User</li>
  <li>Author</li>
  <li>Editor</li>
  <li>Manager</li>
  <li>Administrator</li>
</ul>

You can dynamically add or remove options from this list whenever you need to. And, unlike our <option> element inside a <select>, we can add whatever we like inside the list item. So if you need images to distinguish between lots of very similar-named objects, or to add supplementary details, you can go right ahead. I’m going to add some extra text to mine, to help explain the differences between the choices.

This is a good base to begin with. But it looks nothing like a select input! We want to make sure our sighted users get something they’re familiar with and know how to use already.

Styling with CSS

I’ll add some basic styles similar to what’s in Scott Jehl’s article above.

We also need to make sure that people who customise their colours in high contrast modes can still tell what they’re looking at. After checking it in the default Windows high contrast theme, I’ve decided to add a left-hand border to the focus and hover styles, to make sure it’s clear which item is about to be chosen.

This would be a good time to add any dark-mode styles if that’s your jam. People who get migraines from bright screens will thank you!

JavaScript for behaviour

Of course, our custom select doesn’t actually do anything yet. We have a few tasks for it: to toggle the options list open and closed when we click the input, to filter the options when people type in the input, and for selecting an option to add it to the input and close the list. I’m going to tackle toggling first because it’s the easiest.

Toggling

Sometimes folks use opacity or height to hide content on screen, but that’s like using Harry Potter’s invisibility cloak. No-one can see what’s under there, but Harry doesn’t cease to exist and you can still poke him with a wand. In our case, screen reader and keyboard users can still reach an invisible list.

Instead of making the content see-through or smaller, I’m going to use display: none to hide the list. display: none removes the content from the accessibility tree, so it can’t be accessed by any user, not just people who can see. I always have a pair of utility classes for hiding things, as follows:

.hidden-all {
  display: none;
}

.hidden-visually {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    border: 0;
} 

So now I can just toggle the CSS class .hidden-all on my list whenever I like.

Browsing the options

Opening up our list works well for our mouse and touch-screen users. Our styles give a nice big tap target for touch, and mouse users can click wherever they like.

We need to make sure our keyboard users are taken care of though. Some of our sighted users will be relying on the keyboard if they have mobility or dexterity issues. Usually our screen reader users are in Browse mode, which lets them click the arrow keys to navigate through content. However, custom selects are usually inside form elements. which pushes screen reader software to Forms Mode. In Forms mode, the screen reader software can only reach focusable items when the user clicks the Tab key, unless we provide an alternative. Our list items are not focusable by default, so let’s work on that alternative.

To do this, I’m adding a tabindex of -1 to each list item. This way I can send focus to them with JavaScript, but they won’t be part of the normal keyboard focus path of the page.

csOptions.forEach(function(option) {
    option.setAttribute('tabindex, '-1')
}) 

Now I can move the focus using the Up and Down arrow keys, as well as with a mouse or tapping the screen. The activeElement property of the document is a way of finding where the keyboard focus is at the moment. I can use that to loop through the elements in the list and move the focus point forward or back, depending on which key is pressed.

function doKeyAction(whichKey) {
  const focusPoint = document.activeElement
  switch(whichKey) {
    case: 'ArrowDown':
      toggleList('Open')
      moveFocus(focusPoint, 'forward')
      break
    case: 'ArrowUp':
      toggleList('Open')
      moveFocus(focusPoint, 'back')
      break
  }
}

Selecting

The Enter key is traditional for activating an element, and we want to match the original select input.

We add another case to the keypress detector…

case 'Enter':
  makeChoice(focusPoint)
  toggleList('Shut')
  setState('closed')
  break 

… then make a function which grabs the currently focused item and puts it in our text input. Then we can close the list and move focus up to the input as well.

function makeChoice(whichOption) {
    const optionText = whichOption.documentQuerySelector('strong')
    csInput.value = optionText
}

Filtering

Standard select inputs have keyboard shortcuts – typing a letter will send focus to the first item in the option which begins with that letter. If you type the letter again, focus will move to the next option beginning with that letter.

This is useful, but there’s no clue to tell users how many options might be in this category, so they have to experiment to find out. We can make an improvement for our users by filtering to just the set of options which matches that letter or sequence of letters. Then sighted users can see exactly how many options they’ve got, and continue filtering by typing more if they like. (Our screen reader users can’t see the remaining options while they’re typing, but don’t worry – we’ll have a solution for them in the next section).

I’m going to use the .filter method to make a new array which only has the items which match the text value of the input. There are different ways you could do this part – my goal was to avoid having to use regex, but you should choose whatever method works best for your content.

function doFilter() {
  const terms = csInput.value
  const aFilteredOptions = aOptions.filter(option => {
    if (option.innerText.toUpperCase().startsWith(terms.toUpperCase())) {
    return true
    }
  })
  // hide all options
  csOptions.forEach(option => option.style.display = "none")
  // re-show the options which match our terms
  aFilteredOptions.forEach(function(option) {
    option.style.display = ""
  })
} 

Nice! This is now looking and behaving really well. We’ve got one more problem though – for a screen reader user, this is a jumble of information. What’s being reported to the browser’s accessibility API is that there’s an input followed by some clickable text. Are they related? Who knows! What happens if we start typing, or click one of the clicky text things? It’s a mystery when you can’t see what’s happening. But we can fix that.

ARIA

ARIA attributes don’t provide much in the way of additional features. Adding an aria-expanded='true' attribute doesn’t actually make anything expand. What ARIA does is provide information about what’s happening to the accessibility API, which can then pass it on to any assistive technology which asks for it.

The WCAG requirements tell us that when we’re making custom elements, we need to make sure that as a whole, the widget tells us its name, its role, and its current value. Both Chrome and Firefox reveal the accessibility tree in their dev tools, so you can check how any of your widgets will be reported.

We already have a name for our input – it comes from the label we associated to the text input right at the start. We don’t need to name every other part of the field, as that makes it seem like more than one input is present. We also don’t need to add a value, because when we select an item from the list, it’s added to the text input and therefore is exposed to the API.

Figure 2: How Firefox reports our custom select to assistive technology.

But our screen readers are going to announce this custom select widget as a text entry field, with some images and a list nearby.

The ARIA Authoring Practices site has a pattern for comboboxes with listboxes attached. It tells you all the ARIA you need to make screen reader software give a useful description of our custom widget.

I’m going to add all this ARIA via JavaScript, instead of putting it in the HTML. If my JavaScript doesn’t work for any reason, the input can still be a plain text field, and we don’t want screen readers to announce it as anything fancier than that.

csSelector.setAttribute('role', 'combobox') 
csSelector.setAttribute('aria-haspopup', 'listbox')
csSelector.setAttribute('aria-owns', '#list') 
csInput.setAttribute('aria-autocomplete', 'both')
csInput.setAttribute('aria-controls', 'list')

The next thing to do is let blind users know if the list is opened or closed. For that task I’m going to add an aria-expanded attribute to the group, and update it from false to true whenever the list changes state in our toggling function.

The final touch is to add a secret status message to the widget. We can use it to update the number of options available after we’ve filtered them by typing into the input. When there are a lot of options to choose from, this helps people who can’t see the list reducing know if they’re on the right track or not.

To do that we first have to give the status message a home in our HTML.

<div id='custom-select-status' class='hidden-visually' aria-live='polite'></div>

I’m using our visually-hidden style so that only screen readers will find it. I’m using aria-live so that it will be announced as often as it updates, not just when a screen reader user navigates past it. Live regions need to be present at page load, but we won’t have anything to say about the custom select then so we can leave it empty for now.

Next we add one line to our filtering function, to find the length of our current list.

updateStatus(aFilteredOptions.length)

Then we send that to a function which will update our live region.

function updateStatus(howMany) {
    console.log('updating status')
    csStatus.textContent = howMany + " options available."
}

Conclusion

Let’s review what we’ve done to make an awesome custom select input:

  • Used semantic HTML so that it’s easily interpreted by assistive technology while expanding the types of content we can include in it
  • Added CSS styles which are robust enough to survive different visual environments while also fitting into our branding needs
  • Used JavaScript to provide the basic functionality that the native element has
  • Added more JavaScript to get useful functionality that the native element lacks
  • Carefully added ARIA attributes to make sure that the purpose and results of using the element are available to assistive technology and are updated as the user interacts with it.

You can check out my custom select pattern on GitHub – I’ll be making additions as I test it on more assistive technology, and I welcome suggestions for improvements.

The ARIA pattern linked above has a variety of examples and customisations. I hope stepping through this example shows you why each of the requirements exists, and how you can make them fit your own needs.

I think the volume of custom select inputs out there shows the ways in which the native select input is insufficient for modern websites. You’ll be pleased to know that Greg Whitworth and Simon Pieters are working on improving several input types! You can let them know what features you’d like selects to have. But until that work pays off, let’s make our custom selects as accessible and robust as they can possibly be.


About the author

Julie Grundy is an accessibility expert who works for Intopia, a digital accessibility consultancy. She has over 15 years experience as a front-end web developer in the health and education sectors. She believes in the democratic web and aims to unlock digital worlds for as many people as possible. In her spare time, she knits very slowly and chases very quickly after her two whippets.

More articles by Julie




making

Making Distributed Working Work

Anna Debenham harnesses up the huskies and puts them to work to figure out how teams distributed across multiple locations can work effectively to all pull in the same direction. With modern workforces distributed from north pole to south, can they all be kept running in step?


Four years ago, I started working at a small startup called Snyk that’s based in two locations – London and Tel Aviv. The founders made it clear they wanted to grow headcount in both locations at the same rate, and for the design and engineering skillsets between the two offices to be evenly spread. We’re now at over 200 people and we’re still staying true to that vision, but only by completely changing how we were used to working.

The trend for fully distributed teams is on the rise – companies like InVision and GitLab have entirely remote employees. Snyk is somewhere in between, with small hubs of global team members in homes and shared offices globally alongside our main London, Tel Aviv, Boston, Ottawa and Bay Area offices.

Our R&D teams are based entirely in London or Tel Aviv, with a few employees working around Europe. Rather than have Team A working in one office and Team B working in another, we’ve deliberately designed it so that no R&D team at Snyk has all its members in one location. We could design our teams to be all co-located so that everyone’s in the same room, but we don’t.

When I explain this setup to people, I’ll often get a response of bewilderment – why do it this way? It sounds like a pain! Increasingly though, the reaction is positive – usually from people who’ve worked in a distributed team before where departments are split neatly between locations. They’ve experienced an “us vs them” culture, with work being thrown over the fence to designers or engineers in different timezones. They’ve been at the mercy of the decision makers who are all in the head office. This is exactly what we wanted to avoid. We wanted the company to feel like one team, across many locations.

It’s not perfect – I do miss the things that working in the same location brings such as collaborating on a whiteboard, or having planning documents stuck on the wall for the team to refer to. Pre-distributed working, I used to sit next to a designer and we’d bounce ideas off each other. Now I have to make the extra effort to schedule something in. Managing people remotely is also tough – I can’t easily see that a team member is having a bad day and make them a cup of tea.

But on the whole, it works pretty well for us. The time difference between London and Tel Aviv is a comfy 2 hours, and in Tel Aviv, the week runs from Sunday to Thursday, meaning there’s just a single day in the week when all our teams aren’t working. This makes the week feel like the ebb and flow of a tide – my Mondays are very busy, but on Fridays, half the team is off so there are barely any meetings – ideal for deep focus time.

So how do we make this distributed-but-also-co-located hybrid thing work?

Level the playing field

Firstly, that “us vs them” mentality I mentioned is the key thing to avoid to maintain a positive distributed work culture. Avoid the term “remote team”, as that has a sense of otherness. Instead, refer to your team as “distributed”. It’s such a small change that has the effect of bringing everyone onto the same level.

Also, consider your video conferencing etiquette – if you’ve got a large part of your team in one location, with just one or two members who are dialling in, you could end up with a very one-sided conversation. The room with the most people in it has a habit of forgetting the person they can’t easily see. Even if you’re in the same room, dial in individually so that everyones faces are the same size, and you’re addressing all the participants rather than just those in the same room as you.

Invest in tools that help communication

Early on, we invested in tools that would help make communication between locations as seamless as possible. I’m not talking about those screens with wheels that follow co-workers around a room to recreate a manager breathing down their neck (although now I think of it…). I’m talking about the familiar ones like Slack, Zoom and Notion.

Use a single tool where possible to reduce friction between teams so there’s no confusion as to whether you’re having a call over Google Hangouts, Zoom, Skype or whatever else is fashionable to use this year. Same with meeting notes – keep them in one place rather than scattered across Dropbox, Email and Google Docs.

Remote pair programming has also got a lot easier. We used ScreenHero before it got acquired and lost its remote control functionality – but there are some great alternatives out there like USE Together. You might also have collaboration tools built into your code editor, like Visual Studio’s Live Share, and Atom’s Teletype.

If teams are complaining about bad audio, don’t skimp – invest in better microphones, speakers and sound-proofing. You won’t get the benefits of working as a distributed team if there’s a barrier between communication. Ensure the internet is stable in all locations. Also, it sounds basic but make sure teams have somewhere to take a call in the first place, particularly 1:1s which shouldn’t be done in the open. Previous places I’ve contracted at had people dialling into meetings in stairwells, shower rooms and even toilet cubicles. Take care not to make the experience of working in a distributed team end up harming the experience of working in an office.

Open a window

For as long as we’ve had offices, we’ve had a fixed camera and TV screen setup between them that acts as a “window” between locations. The camera is on all the time, and we turn the microphone on once a day for standup (or whenever someone wants to say hi). When I turn on the TV in the morning, I can see the Tel Aviv office already working. At midday, our Boston office comes online, followed shortly after by our Ottawa office. It’s incredible what a difference this has made to make us feel more like one office.

We’ve positioned one of the cameras next to our dining area so we can eat together. Another camera is honed in on a dog bed in the corner of the office (sometimes there’s a dog in it!).

Distributed meetings

With the time differences and weekday shift, there’s a condensed timeframe in which we can collaborate. It’s not as bad as it could be (I pity my fellow Londoners who work for companies based in California), but the hours between 9am and 4pm Monday to Thursday for us are at a premium. This means the meetings we have need to be a good use of everyone’s time. When we can’t find a time that works for everyone, we record the meeting. But even if everyone can make it, we still take notes.

The notebook brand Field Notes have a slogan “I’m not writing it down to remember it later, I’m writing it down to remember it now.”. This is a reminder that it’s not always the notes themselves that are useful, but the act of taking them. Where they’re really powerful is when you share them in real time. In Kevin Hoffman’s book ‘Meeting Design’, he recommends the notetaker shares their screen while taking notes so that everyone can participate in making sure those notes are accurate. Having the notes on the screen also helps focus the conversation – particularly if you have an agenda template to start with. It means you’ve got a source of truth for someone who mis-remembers a conversation, and you’ve got something to look back on in the next meeting so you don’t repeat yourselves.

Another tip we’ve taken from Kevin’s book is to have a kanban board for standing meetings, where everyone can add a topic. That way, you always have a backlog of topics to discuss in the meeting. If there aren’t any, you can cancel the meeting!

We use Notion’s kanban template for our sync meeting notes. Anyone can add a topic before (or during) the meeting and we go through each of them in order. We add notes and action points to the topic card.

Don’t get into bad habits when you’re lucky enough to be sharing a single space – keep documenting conversations and decisions in the same way you would with a distributed team, so that future you can remember, and future team members can gather that context.

Team bonding

I always think the best way to bonding with people is over a meal – isn’t that what Christmas dinner is great for? As a distributed team, we can’t do that. We could try and recreate it (even just for the comedy value), but it’s really not the same. We have to try something different.

Enter Eurovision. For those of you outside Europe, imagine a cheesy pop song contest where each country performs their own song and everyone votes for the winner. This year, it was held in Tel Aviv, so dozens of us sat down to watch the live stream. We set up a Eurovision Slack channel and shared our horror in real time.

But Eurovision only happens ones a year, so we’ve extended shared experiences into multiple “hobby” Slack channels: we have one for food fans (#fun-foodies), football fans (#fun-footies), and even sourdough fans (#fun-sourdough). There’s also a weekly “drink and sync” where office-less team members join a video call and chat over a beer, coffee, or juice depending on the time of day for those that dial in. One team runs a movie club where they choose a video that’s relevant to their team’s work (such as a conference talk) and watch it together at the same time.

Onboarding new team members can feel quite impersonal if their manager isn’t in the same office. Starting your first day in an office full of strangers, where the only interaction with your manager is over a video call can feel daunting. And as a manager, I get anxious about my new hire’s first day – was there someone there to greet them and show them where they sit? Was everything set up for them? Did they have someone to eat lunch with? So we’ve been rolling out an “onboarding buddy” scheme. This is someone local who can help the new hire settle in to their new surroundings. It’s someone to chat to, share a coffee with, and generally look out for them.

We also use a Slack app called Donut which pairs employees up for informal chats to get to know each other. You get paired with someone random in the company and it helps you schedule a call with them. This is to encourage cross-pollination across teams and locations.

What distributed teamwork has taught us

There’s a lot that we’ve learnt about working well as a distributed team. We try and recreate the good things about sharing a physical space, and make them feel just as natural in the digital space, while also compensating for the lack of intimacy from being thousands of miles apart.

Mel Choyce’s 24 ways article Surviving—and Thriving—as a Remote Worker stresses the value of remote working, and the long term benefits it has had.

Working remotely has made me a better communicator largely because I’ve gotten into the habit of making written updates.

I think in a lot of ways, the distance has brought us closer. We make more of an effort to check in on how each other is doing. We document as much as we can, which really helps new hires get up to speed quickly.

By identifying what we find valuable about working in the same room, and translating that to work across locations, we find collaboration easier because we’re no longer strangers to each other. We might not be able to have those water-cooler moments in the physical realm, but we’ve done a good job of replicating that online.


About the author

Anna Debenham lives in London and is a Product Manager at Snyk.

She’s the author of Front-end Style Guides, and when she’s not playing on them, she’s testing as many game console browsers as she can get her hands on.

More articles by Anna




making

Managing interdependencies in federal systems: intergovernmental councils and the making of public policy / Johanna Schnabel

Online Resource




making

Administrative burden: policymaking by other means / Pamela Herd and Donald P. Moynihan

Dewey Library - JK421.H396 2018




making

Legislative hardball: the house freedom caucus and the power of threat-making in Congress / Matthew N. Green

Dewey Library - JK1319.G744 2019




making

The loyal republic: traitors, slaves, and the remaking of citizenship in Civil War America / by Erik Mathisen

Dewey Library - JK1759.M39 2018