title

revealOptions

Patterns for Hiring

transition
slide

Patterns for Hiring Leads & Candidates

Claudina Sarahe, @itsmisscs

Note: Important for both hiring managers and for us as developers and workers. In short,this is an area where I think everyone should be involved and care because it is a pivotal backbone to the culture and environment. We spend so much of our lives at work. Processes...institutions.

v much not an expert

Note: these experiences from few years hiring at high growth startup coupled with learnings from organizing and colleagues.

Roundtable and Chat

Take a 10-15 minute break after the talk

Note: Do something different. Challenge us here as we gather. Keep your questions and jot them down. Break. Drinks. Food. Circle up chairs. Discussion / QA.

Outline

Global: Hiring leads + team
Candidate level
Hiring leads

Sustaining inclusive and diverse teams begin with inclusive processes within

Note: You are what you eat adage holds true. I believe that an in order to have an enjoyable hiring that yields diverse, inclusive, creative,productive teams you must

Bring the team into the process

Be open and participatory

Note: If you have a hiring process or are putting in a more formal one, start by inviting those that want to be a part of it

Form hiring teams/committees

Share the process back to the whole team

Establish core tenets

What qualities do you most value in a code and in a candidate?

Simplicity
Consistency

Note: Set these up early. Invite the whole team to be a part of it. Core tenets can function both as code and person

Framework agnostic

Tenet: Simplicity

Core languages of our craft: JS, CSS, HTML

Note: We valued JS, CSS, HTML. I stand that a good developer can and will know everything. Specialist are necessary. If you need a specialist, then test for that specialization.

Establish guidelines for the role

Sets expectations for the candidate and your team

What are some of the tasks this person will be doing?
Are you hiring for a specific project? What happens after it ends?
Are you filling a specific need?

Note: Doing this may help you realize you need to define current team roles and responsibilities

Establish guidelines for your process

What are the steps in the process? (Phone screen, code, in person)
Whose going to participate in each step? Are the positions fixed?
What tools are we going to use? (Greenhouse)
How are we going to control against bias?

Note: Key is that everyone is aware of process. Hiring is a huge load. Spread it as much as possible.

First touch matters

Note: For us, phone Put someone the phone that cares, will listen, make conversation, and is invested in learning about that person.

Become friends with talent team

Note: You need to collaborate. If you don't want to be on the phone, help them screen candidates by providing questions they can ask. Greenhouse for notes.

Candidate interview profile

Note: Not everyone interviews well. This can either come directly via form sent to candidates or through references. Some ideas

Questions for candidate profile

Do you prefer morning or afternoon interviews?
Would you prefer in person or remote for your first conversation?
Do you have any needs we can assist with, such as an energy so to minimize walking?

What's your Preferred Gender Pronoun (PGP)?

Be real about right fit later

Note: So many people I wanted to hire but needed to wait until there was stability. Be sincere about this by working with TS to keep in touch. As canddiate, if you really liked it, follow up, even if you do get a job. If no movement after 6 months, tell candidate.

Provide Feedback. Get Feedback.

Note: Hiring leads you must be willing to provide feedback so TS send out. Be prepared to offer. Call candidates you personally connected with. Candidates, ask for feedback. What's one things I could improve on my test? If tenets, feedback becomes really easy to give.

Thoughts for Candidates

Define your tenets

What do you want out of the position?

Note: What do you want to get out of the job? clear: room to grow, better process; for a new dev could be get a job on respectful teams

Ask about day to day

What's the process for a typical feature or sprint?
How do you spend your day?
What does a typical day for team member look like?

Note: Ask about someone at your level and also ask above is you are looking to grow

Care about your growth

Ask about mentorship and career growth

Pairing
Code review process
How are code decisions and standards formed?
Learning budget—encouraged to learn
Developer ratio (Junior to Senior)
Tech stack

Note: A job for jobs sake will not help you. Signs to look for.

Preparing for code challenge

Note: All in the details. Areas. Pitfalls to pay attention to

Documentation

Does your project include a `README.md`?

Note: how detailed does it get. if you do something different, note it. documentation helps people.

Code documentation

JSDOC style syntax across all file types

Directory Organization

Note: Lots of patterns here. Here's good vs signs of lack of organization

Common patterns

Within the root folder:

Core code files: src/ or app/
Compiled files: dist, public/, build/

Example: Good Directory Structure

app
├── js
│   │── vendor/
│   │   ├── jquery.js
│   └── main.js
├── css
│   └── main.css
├── views
│   └── index.html
├──
dist
├── // compiled assets

Code Consistency

Spacing
Indentation
Stale code (e.g. commented out)

CSS Linters & Style Guides

Harry Roberts, CSS Guidelines

Hugu G, Sass Guidelines

MDO, Code Guide

Stylelint

csscomb

Other CSS/Sass Linters

Sass-lint
SCSS Lint

JS Linters

Plugins available for most editors

ESLint

Note: Pluggable different standards

AirBnb Code Standards

Lots of standards

JS Standard
Google

Naming

Clear, concise, patterns
Remix from other frameworks

Note: Check out semantic UI or frameworks for ideas. visit sites you like.

Command & Understanding of HTML

Are you using more semantically appropriate element?
Is accessibility a fore or afterthought?

Know your tags

<div class="price">
  ${{ price }}
</div>

Answer: Daily Double

<output for="price-field" name="price" class="price">
  ${{ price }}
</output>

Represents the result of a calculation or user action.

Note: Okay. Esoteric. But this isn't..

<div class="btn">
  Get it
</div>

`<div>` is not `<button>`

HTML is more than divs

<div class='item'>
  <div class='item__name'>
    {{ name }}
  </div>
  <div class='item_description'>
    {{ description }}
  </div>
  <div class='item_price'>
    {{ price }}
  </div>
  <div class='item__purchase' data-name='{{ name }}' data-price='{{ price }}'>
    <div class='btn'>
      Get it
    </div>
  </div>
</div>

<article class='item'>
  <h2 class='item__name'>
    {{ name }}
  </h2>
  <p class='item_description'>
    {{ description }}
  </p>
  <output for="price-field" name="price" class="price">
    ${{ price }}
  </output>
  <div class='item__purchase' data-name='{{ name }}' data-price='{{ price }}'>
    <button class='btn'>
      Get it
    </button>
  </div>
</article>

CSS

Understanding of specificity
CSS Architecture
Organization
Style

Over-qualifying elements

button.delete {

}

Empty Rule Sets

.price {
}

Unit consistency or pattern

.sidebar {
  margin-left: 3%;
  padding: 1.5em 40px;
}

CSS Architecture

SMACSS
BEM
CSS Modules
ITCSS
ExpressiveCSS
FunctionalCSS

Note: some are more about styles and less prescriptive about organization. others are more coupled.

Solve problem at hand first

before adding complexity

Setup your own simple build process

Process your CSS
Transpile your JavaScripts
Compile your HTML Templates

Gulp.js for making builds

Easy to grok
Lots of tutorials and good content
More intuitive working with HTML templates

But isn't Webpack the thing?!?!

Note: If react job or JS heavy, sure. Any of the followign can work in either

Autoprefixer for vendor prefixing

@mixin box-sizing( $type: border-box ) {
    -webkit-box-sizing: $type;
       -moz-box-sizing: $type;
         -o-box-sizing: $type;
        -ms-box-sizing: $type;
            box-sizing: $type;
}

*,
*::before,
*::after {
  @include box-sizing(border-box);
}

Note: If you are using a build process, this is must @EXTRA Webpack way vs gulp way.

@mixin box-sizing( $type: border-box ) {
  box-sizing: $type;
}

*,
*::before,
*::after {
  @include box-sizing(border-box);
}

Avoid coupling HTML + JS

$(".cart .count").html(count);
$(".cart .total").html(total);

Note: Going to refactor.... better

Use JS Selectors

$(".js-cart .js-count").html(count);
$(".js-cart__count").html(count);

Add linters to your code editors

Keep up with the Industry

Note: Scientiest doesn't keep up with research in their field. They will become obsolete

Find your method

Digest Lists & Newsletter
Podcasts
Meetups
Conferences
Twitter accounts and lists
Slack groups
Medium

Note: Volunteer at conferences.

Hack the industry pulse

Bleeding edge. Hottest. (0-18 months)
Best practices (3+ years)
What’s on the mind of the community?

Test your code before submitting

Dreaded `-g`

Wipe your node modules
Re-install node version
Ask a friend to try out

Manage node

nvmrc
n

Give credit were it is due

We all copy pasta

Note: Include license files or mentions in code comments. Add mention in your readme. This also shows that you keep up.

Does it work?

Depends ;)

Note: Seniors (must work) and mid-levels. recap should flag it. hopefully discussed in the interview

Thoughts for Hiring Leads

Drive & Passion

Look for this quality

Why are you looking to leave your current position?
What do you like to do when you aren’t coding (and the answer can be coding)
Tell me about a project or moment you were most proud of in the last year

`recap.md`

What went well?
What would you improve given/more time resources?
Do you have any feedback on the challenge (what would you change, improve, keep…)?

Note: Anecdote—story about how got this from a candidate. These are great way to provide more perspective about the work of the candidate

Files

gothamsass-hiring-28022017.md

Latest commit

History