Bring the team into the process

Be open and participatory

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

Framework agnostic

Tenet: Simplicity

Core languages of our craft: JS, CSS, HTML

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?

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?

Candidate interview profile

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)?

Define your tenets

What do you want out of the position?

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?

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

Code documentation

JSDOC style syntax across all file types

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

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

AirBnb Code Standards

Lots of standards

• JS Standard
• Google

Naming

• Clear, concise, patterns
• Remix from other frameworks

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.

<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

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?!?!

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);
}

@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);

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

Find your method

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

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

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…)?