| title | revealOptions | ||
|---|---|---|---|
Hiring Patterns for Candidates |
|
Claudina Sarahe, @itsmisscs
she/her/they/them
Product, Strategy, Team Building, Development, Training
Note: help scale products and teams. i work a lot between design and development but also management and leadership. holistic.
Note: Untraditional path, too
- Consulting Director Frontend Engineering, Casper
- Co-creator SassConf, Conference for Front-end
- Co-founder and alumna organizer GothamSass
- Co-founder Autotax. Y Combinator Finalist
Note:
- Learning Portuguese
- Woodworking
- Why I'm passionate about hiring, teams, organizations
- Ways to Prepare
- Invest in Learning
Note: Experiences from hiring at high growth startups and learnings from organizing, work in worker-owner models, agency...
Note: You are what you eat adage holds true. I believe that an in order to have an enjoyable hiring process that yields diverse, inclusive, creative, productive teams you must have an inclusive process. process indicative of the team.
Note:
Leveling of the power structure
Note: You learn about them while they also learn about you. Key to know your position (tenets, talk about later). Or maybe more like
Note: all too often the hiring process is horrible soul wrenching experience. it is this way for everyone.
- Define your tenets
- Do your research
Note: Tenets drive research
- What do you hold valuable in a role?
- What do you want out of the position?
- What's most important to you—mentorship?
Note: What values do you want out of a place to work. If you can, prioritize them. 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. Pause to let students define tenets. Work life balance. Perks? Remote or ability to work from home. Flexibility.
Note: Helps you come prepared. Depends on your first touch, how you are getting to meet. Questions for hiring managers, phone screens. Ask for thinigs you don't get.
Don't be shy, reach out to people.
Note: Reach out to employees on Twitter or at Meetups to help you learn more. Linkedin.
- Social media presence
- Team page / About us page
- Imagery
- Language and tone of the content
- Participation in the community (OSS, Meetups, Conferences)
Note: Use your tenets to help you organize your research. For example, if you value learning, did you find any information about learning? If not, add that to list of questions to ask the company (if interviewing) or people that work there
- 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
- Pairing
- Code review process
- How are code decisions and standards formed?
- Learning budget—encouraged to learn
- Developer ratio (Junior to Senior)
- Tech stack
Note: Care about your growth. Answers revel the team and type of environment. clues that help you rank against your tenets.
Note: While knowing and going after what you want is important. Sometimes the way in is with something else that opens a portal. Is one of your tenets to learn?
- Creating French graphics in Photoshop
- Manual data entry and small bug fixes
Note: Nice segue way to...
Note: Code challenges. Different everywhere. Vary a lot by team. I believe that they are important clues to org and team structure
Practice, practice, practice.
Note: JavaScript 30 Challenge, Daily exercises
Note: Go go over more in detail
Note: You are not alone in thinking these are horrible
- Test your logic and reasoning
- Talk through your thoughts
Note: Personal opinions. Practice narrating answers. Peer code review.
(helpful for other challenges, too)
Note: I'm a proponent of take home code challenges. while they can take longer they offer a better view of the candidate
- More realistic of feature work
- Higher expectation based on time
- Make a schedule
- Clarify any directions after you receive it
- Communicate if you need more time
- Be ready to communicate your choices and direction
Your opportunity to give a bit more context into your code challenge
- 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 about how got this from a candidate. These are great way to provide more perspective about your work. Mini standup/down
Note: how detailed does it get. if you do something different, note it. documentation helps people.
Note: Lots of patterns here. Here's good vs signs of lack of organization
Within the root folder:
- Core code files:
src/orapp/ - Compiled files:
dist,public/,build/
app
├── js
│ │── vendor/
│ │ ├── jquery.js
│ └── main.js
├── css
│ └── main.css
├── views
│ └── index.html
├──
dist
├── // compiled assets
- Spacing, indentation
- Naming
- File names
- Classes, functions
- Documentation
- Stale code (e.g. commented out)
Note:
JSDOC style syntax across all file types
- Plugins available for most editors
Note: Pluggable different standards
Be a great artist, steal and remix from other frameworks
Note: Check out semantic UI or frameworks for ideas. visit sites you like.
- JavaScript Design Patterns
- Functional Programming
- Are you using the most semantically appropriate element?
- Is accessibility a fore or afterthought?
Note: Very challenging. Area of most difficulty.
<div class="price">
${{ price }}
</div>
<label name="price-field">Cost</label>
<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>
(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>- Understanding of A and AA
- Aria roles and patterns
Note: Look at libraries for clues. Some people worth following in the field
- Understanding of specificity
- CSS Architecture
- Organization
- Style
button.delete {
}
Don't leave empty rulesets
.price {
}
Show consistency or understanding of usage patterns
.sidebar {
margin-left: 3%;
padding: 1.5em 40px;
}
Note: Understand what power each unit gives you and why to use it
Note: you still keep px size adjustments at the document level so you can make easy/efficient sweeping size changes. But then each module on the page has a font-size set in rem. Actual text elements (h1, h2, p, li, whatever), if you size them at all, are sized in em, and thus become relative to the module.
No need to handwrite vendor prefixes.
@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. Autoprefixer is available for most build processes
@mixin box-sizing( $type: border-box ) {
box-sizing: $type;
}
*,
*::before,
*::after {
@include box-sizing(border-box);
}Structure and design of your code
Note: some are more about styles and less prescriptive about organization. others are more coupled.
- OOCSS
- SMACSS
- BEM
- CSS Modules
- ITCSS
- ExpressiveCSS
- FunctionalCSS
- CSS Modules
- Styled Components
- Easy to grok
- Lots of tutorials
- More intuitive working with HTML templates
- Gulp 4.0.0 is stagnant :(
Note: Yes, important to know it. But also what tool is best for the job. Example, building a static static (.html pages)
$(".cart .count").html(count);
$(".cart .total").html(total);
Note: Going to refactor.... better
$(".js-cart .js-count").html(count);
$(".js-cart__count").html(count);
- Proofread, eg. Grammarly
- Get opinions
Avoid the dreaded -g
- Wipe your node modules
- Re-install node version
- Ask a friend to try out
Or, n. Both are good options.
Note: Include license files or mentions in code comments. Add mention in your readme. This also shows that you keep up.
Note: How did they reach to you? How did they treat you? Did they respect your time?
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 candidate, if you really liked it, follow up, even if you do get a job. If no movement after 6 months, tell candidate.
Note: Candidates, ask for feedback. What's one things I could improve on my test? If tenets, feedback becomes really easy to give.
- Refactoring
- Performance
- Responsive Images
- Animations
Note: Each area has sub-components
Note:
I'm still learning - Michael Angelo
Note: An invest in learning shows that you are serious about advancing
JS, CSS, HTML
Note: We valued JS, CSS, HTML. I stand that a good developer can and will know everything. I will forever always test core languages over frameworks. I really think it depends where you are applying
Note: If a scientist doesn't keep up with research in their field, they will become obsolete. This was one of my pass/fail questions. Why? If you are not invested in learning, you will not be an active team member.
- Digest Lists & Newsletter
- Podcasts
- Meetups
- Conferences (volunteer at them)
- Twitter accounts and lists
- Slack groups
- Medium
- Books
- Panda
- Awesome list repos
- Callback Women
- League of Lady Coders
- GothamSass
From Meetup.com and beyond. Psst, lurk on Twitter.
- BrooklynJS
- QueensJS
- ManhttanJS
- JerseyScript
- Nodebots
Sidebar.io Design Newsletter
- Bleeding edge. Hottest. (0-18 months)
- Best practices (3+ years)
- What’s on the mind of the community?
Note:
- Process CSS
- Transpile JavaScripts
- Compile HTML Templates
- Minify and prepare for production
Note: my first site was for a professor
- Are you going to meetups?
- Do you have code examples?
(Remember, a solid foundation is required to build a tower)
- Async/wait
- CSS Grids
- Immutable Data Structures
- Functional all the things
- Flexbox
- Progressive Web Apps
- Design Systems
- Performance