davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>“Explain a Topic At Multiple Levels…” (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://jacobian.org/2021/feb/8/interview-questions-explain-a-topic/">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>“Explain a Topic At Multiple Levels…”</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://jacobian.org/2021/feb/8/interview-questions-explain-a-topic/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p><em>Each day this week I’ll be sharing one of the questions I use when I interview for technical roles. I’ll unpack the question, when to ask it, and how to evaluate answers. <a href="https://jacobian.org/series/unpacking-interview-questions/">You can see all articles in this series here</a>.</em></p>
<h2 id="background">Background</h2>
<p><em>Who this is for</em>: technical roles at any level where communication with non-technical staff is important (which, for me, is all of them).</p>
<p><em>What it measures</em>: ability to communicate technical topics effectively to a variety of audiences. Secondary to this, knowledge of some foundational web development topic.</p>
<p>This is one of my favorite questions to ask for engineering roles; strong performance on this question correlates very highly with high job performance on my teams. This is because my teams are almost always <a href="https://jacobian.org/2021/jan/5/designing-engineering-organizations/">cross-functional teams</a>. And, being able to communicate effectively is part of being a good engineer (<a href="https://jacobian.org/2019/apr/3/iq-isnt-enough-to-get-hired/">IQ isn’t enough to get you hired</a>).</p>
<p>Engineers on my teams need to be able to communicate effectively with their colleagues, who will have a wide range of software experience. An engineer who can’t talk about their work with others on the team isn’t a good team member, and isn’t someone I want to hire. This question simulates something that happens on these cross-functional teams: the need to explain technical topics and tailor the explanation for the audience’s skill level.</p>
<p>A secondary benefit is that this question can look for some level of technical knowledge – someone who knows web development well should be able to make that knowledge apparent – but that’s less important here than the communication aspects.</p>
<hr><h2 id="the-question">The question</h2>
<p><strong>“Pick a foundational web development concept (e.g. HTML, CSS, JavaScript, etc.) and explain it at two levels: first as you would to a colleague who’s not a software developer, like a designer or product manager; next, as you would to a peer.”</strong></p>
<h3 id="what-behaviors-to-look-for">What behaviors to look for</h3>
<ul><li>Do they communicate effectively at both levels of technical detail?</li><li>Do they demonstrate knowledge of the topic at a level that’s appropriate to the role?</li></ul>
<h4 id="positive-signs">Positive signs</h4>
<ul><li>👍 <strong>Strong explanations at both levels</strong></li><li>👍 Takes a moment at the beginning to consider and choose a good topic</li><li>👍 Tailors explanation for each skill level</li><li>👍 Effective use of metaphor or other rhetorical devices</li><li>👍 Focused, organized, succinct explanation</li><li>👍 Asks questions to guide their explanation</li></ul>
<h4 id="red-flags">Red flags</h4>
<ul><li>🚩 <strong>Unable to give a strong description at either (or both) levels</strong></li><li>🚩 At the non-technical level: excessive use of jargon or other assumed technical knowledge</li><li>🚩 Patronizing tone, especially when explaining “down”</li></ul>
<hr><h2 id="discussion">Discussion</h2>
<p>In practice, when I ask the question I often have a longer preamble and more explicit way of asking this; I’ll say something like:</p>
<blockquote><p>The job involves working with folks with a wide range of technical experience. We often need to discuss technical topics at a variety of different levels of detail. So, to simulate that: I’m going to ask you to pick a foundational web development concept (e.g. HTML, CSS, JavaScript, etc), and explain it to me at two levels of detail. First, I’ll ask you to explain it to me as if I were a a colleague who’s not a software developer, like a designer or product manager. Then, we’ll re-wind, and I’ll ask you to go deeper and explain it to me as if I were a peer.</p></blockquote>
<p>Evaluating candidates is relatively straightforward – you’re directly measuring their ability to communicate. However, <strong>there’s a high risk that unconscious bias can color your evaluation of a candidate’s answers.</strong> A few things to keep in mind to help control for unconscious bias:</p>
<ul><li>Since this question is all about communication, <strong>be very careful about making judgement based on accent</strong>. We’re socially conditioned to believe that certain accents – Black accents, Southern accents, strong accents from non-native-English speakers – are indicators of low intelligence. This is bullshit; don’t fall for the trap.</li><li>Be wary of judgement based on communication behavior that may be triggered by nerves. Many speakers have verbal tics that are especially bad when they’re nervous – e.g. stalling words like “um” or “like”, mumbling, long pauses, etc. Remember that job interviews make most people <em>really</em> nervous, so these behaviors will be substantially more pronounced in the interview than they’d be in real life.</li><li>The primary behavior you’re evaluating here is communication skill. So pay close attention to the way the candidate structures their explanation, the way they talk and explain, how they engage (or don’t) with you, etc. Pay less attention to the technical details (other questions will get deeper there). Remember that we’re prone to think that members of underrepresented groups are less technically talented than the majority. If you find yourself thinking, “this person doesn’t know what they’re talking about”, come back to what specifically they said or did to give you that impression. Is the judgement coming from their specific behavior, or from bias?</li></ul>
<h3 id="alternate-versions-of-this-question">Alternate versions of this question</h3>
<p>This can be adapted for nearly any domain by just changing “web development” to some other field. I’ve used versions of this question to interview data scientists, GIS analysts, security engineers, SREs, and more.</p>
<p>It’s probably also useful for non-engineering roles – I can imagine versions of this question being useful for designers, copywriters, etc. But I’ve not tried that myself.</p>
<h3 id="see-also">See also</h3>
<p>This is something of variation of a classic technical interview question: “in as much detail as possible, tell me what happens when you type <code>google.com</code> into your browser and hit enter.” That question also measures technical knowledge and communication ability (because they’re communicating it to you). But to fully answer that question would require <a href="https://github.com/alex/what-happens-when">an answer that is long to the point of absurdity</a>.</p>
<p>My version makes the scope more manageable, and adds the additional challenge of making the candidate consider different audience skill levels.</p>
<h2 id="questions">Questions?</h2>
<p>Next week, I’ll publish a series wrap-up, summarizing the series as a whole and addressing a few big-picture topics. If you have questions <a href="https://twitter.com/jacobian">tweet at me</a> (DMs are fine too). I’ll address common questions in the wrap-up.</p>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>