Advice for new web devs

April 16, 2019

Please see the sister project: Web dev tech trends

Context/Preface

Originally I wrote this as a "graduation speech" to the graduating students of a coding bootcamp, Coding Dojo, in April of 2019. I was asked to give a "tech talk" to the soon-to-be graduates, and then I went all out.

This is a replica of the original README doc on my GitHub (see repo). Give it a star there if you like this :)

Developing yourself

Keep growing your potential, developing your skills, and building your confidence. (It's an exciting, life-long process.)

Setting up your dev environment

"A developer is only as good as her environment."

— a fake quote I made up

Ground zero is making sure you have the tools of the trade ready. An amazing toolbox is essential for an amazing craftsperson. A good development environment exponentially enhances your coding capabilities.

  1. Configure your command-line interface of choice, such as Terminal, Hyper, or iTerm on Mac.
  2. Install git via Xcode Command Line Tools (Mac only) or the git-scm download.
  3. Download your text editor of choice, such as VS Code, Atom, or a JetBrains product (if you have the money).
  4. Configure your text editor by downloading packages (Atom) or extensions (VS Code).
    1. Install a linter and auto-formatter for your text editor, preferably ESLint and Prettier. (Note: ESLint and Prettier require you to install Node and follow the set up instructions found on each site.)
    2. Install necessary language support and syntax highlighting packages, if not already enabled by default.
    3. Install auto-completion and snippet packages for the necessary languages.
    4. Install a git differentiator package.

Setting up your GitHub

GitHub is home to the world's largest community of developers and their projects. Join the millions of developers already using GitHub to share their code, work together, and build amazing things.

— what GitHub says about themselves.

The coding/development community lives and thrives on GitHub. This is your new home.

  1. Join GitHub if you haven't already.
  2. Make your profile friendly. Add your name, email, bio, and location.
  3. Create new repositories (repos) for your best projects.
  4. Follow awesome developers.
  5. Read good code, clone repos, and play with the code.
  6. Star and "Watch" great repos.
  7. Contribute to an open source project.
  8. Create your own website using GitHub pages.

Creating your website

GitHub offers free "static" website hosting through GitHub Pages. Take advantage of that! (Save some $$$.) GitHub Pages can be used for websites for your portfolios, projects, documentation, etc.

  1. Create a new repository named yourusername.github.io, where "yourusername" is your GitHub username, e.g. jimmy.github.io
  2. Open your command-line interface application (Terminal, Hyper, iTerm).
  3. Navigate to your "dev" directory (or wherever you store your development projects).
    • cd ~/dev
  4. Copy your repo's git url and use it to clone your new (empty) repo. (Or copy this example and replace "{yourusername}" with your GitHub username)
    • git clone https://github.com/{yourusername}/{yourusername}.github.io
    • git clone https://github.com/jimmy/jimmy.github.io
  5. Go to your newly created directory.
    • cd {yourusername}.github.io
    • cd jimmy.github.io
  6. Start by creating an index.html file.
    • touch index.html
  7. Open this project directory in your text editor.
    • code . for VS Code or atom . for Atom
  8. Edit the HTML file and create a basic website.
  9. Add the HTML file to git.
    • git add index.html
  10. Commit to git with a simple message.
    • git commit -m "Initial commit"
  11. Push your first commit to your repo's master branch.
    • git push -u origin master
  12. Check out your new site! Open your browser and go to https://yourusername.github.io/ (but replace "yourusername" with your GitHub username, of course).
  13. Get a custom URL if you want!
    1. Buy a domain through GoDaddy or Google Domains
    2. On GitHub, navigate to your GitHub Pages site's repository and click Settings (in the top right tabs).
    3. Add your custom domain under "Custom domain" and click Save.
    4. (Recommended) Ensure you enforce HTTPS for your site.
    5. Configure an ALIAS, ANAME, or A record with your DNS provider.
    6. (May or may not be necessary) Remove and then re-add your custom domain to your GitHub repo's Settings.

Building your portfolio

Use your website to showcase yourself and your unique identity (or "brand" in business-speak). Here are some ideas for what to include:

  • Your name
  • An introduction, "about me", or bio
  • A way for people to contact you (e.g. email)
  • Links to your best work and projects
    • Links to your code for each project in GitHub
  • Link to your GitHub itself
  • Link to your résumé
  • Links to your social media (e.g. LinkedIn)

Building your identity

"If you don't know what you want, you end up with a lot you don't."

— quote from Fight Club by Chuck Palahniuk

if (!you.know(whatYouWant)) {
  return whatYouDontWant;
}

— a bad coding joke by me

Learn about yourself. Discover what you want.

Take time to think about yourself, your life, and your ideal career. Decide what would be the best fit for you personally. Learn your strengths, preferences, passions, and values. Find a career path (jobs) that you can connect with personally.

Strive for a deep engagement with your work and a meaningful connection with your team, your leadership, and your organization's priorities, goals, principles, values, mission, and vision. Seek a career that keeps your values aligned with the values of your workplace.

Becoming a better developer

My adaptation of 10 Ways to Become a Better Developer:

  1. Read other people's code.
  2. Get someone to read your code.
  3. Fix bugs before writing new code.
  4. Learn new technologies.
  5. Keep it simple.
  6. Write README's and wikis.
  7. Contribute to open source.
  8. Fix it; don't hack it.
  9. Cover your code with tests.
  10. Don't sit for hours on end.

Building your confidence

Confidence is key to almost everything in life but doubly so for carving a new career path. This is often the biggest worry of new developers. Beginners might feel as though they'll never feel confident in their own abilities to be a great developer and create custom projects from scratch. The best way to build confidence is through practice.

Practice

Practicing code means building the types of projects that you want to be confident in being able to create. Hone your craft; focus on a few types of projects that you want to be confident with. Choose those projects carefully and build a few on your own. This will push you, but your work will only be accountable to you. (It's safe to fail and make mistakes.) Be sure to give yourself project goals that you are passionate about and genuinely interested in. This is the fuel to your motivation! Keep your goals big but realistic.

Here are some types of projects you may wish to practice:

  • Event planner / registration app (calendar)
  • Social media / forum app
  • Blog website
  • Online store website
  • Contact form
  • Login interface
  • Portfolio website
  • Brand website
  • Band website
  • Restaurant website
  • Résumé / CV website
  • Search, filter, sort list app (directory)
  • C.R.U.D. list app (generic data interface)
  • Calculator app
  • Information processor app
  • Data visualizer app
  • Game

Templates

As you start on your third or fourth project of a specific type, you'll start to notice yourself repeating some steps in the process of developing that particular type of project. This is a beautiful sign that you're ready to start building templates!

A template is a starting point / launching pad for a particular type of project. It reduces time taken to get started by having all the commonly repeated steps completed for you at the beginning. The goal is to reduce repeating boilerplate code. Write the code once in a great template and write it really well. Then reuse that template for any future projects of that particular type. (Templates are a lot like a good function, where the parameters are the variable aspects expected for every project of the template's type and the returned output is the base project.)

In the process of creating a template, you'll refine your boilerplate code and make it consistent and reusable. Then, if you give it good documentation, you can share your template with the broader, open dev community. Add a well-written README.md with your documentation to the root of your project; then push that to a new repo so anyone can clone your template and use it for their own projects of the template's specific type.

If you've created a template for a type of project, you're certainly mastering that type of project, which should also bolster your confidence!

Exposure

Explore different approaches, methods, and processes for creating the types of project that you're seeking to build your confidence in and master. Find new ways of recreating your projects using different technologies, frameworks, and libraries. Try different templates and boilerplates for your projects. Compare and contrast each discovery, noting pros and cons.

Presentation

The process by which you share and present your projects is as important as the process by which you create the project in the first place. Great presentation and sharing requires a great degree of confidence. The more you practice presenting your work, the better your confidence will become. There is an art and a science to talking about yourself and sharing your projects and code. Use your portfolio and any areas where you write about yourself, such as bios for websites, as your training grounds. They should be constantly evolving as your skills improve and your confidence boosts.

Studying best practices, principles, and patterns

Stay fresh. Learn about industry standards and practices. Explore developing patterns.

  1. Read the documentation of new developments, such as frameworks, libraries, and tools.
    • Read the source code in the repo on GitHub.
  2. Listen to someone explain good code.
  3. Watch someone write good code.
  4. Follow rad developers and organizations that are active in the development community. (Find out who is behind your favorite technologies and frameworks.)
  5. Regularly check up on the topics you care about on GitHub.
  6. See what's trending on GitHub by seeing which repos have the most stars for particular topics or tags.
  7. Check up on great blogs or podcasts.
  8. Attend cool conferences or meetups.
  9. Work on projects on your own and with friends.
    1. Ask for recommendations on what to use when starting a project.
    2. Explore various ways of accomplishing your goal.
    3. Check out similar projects to see what others use and how they accomplished their goals.
    4. Check to see if there is new standard or practice for doing what you're trying to do.
    5. Have people review your code.
  10. Seriously, do projects! Nothing will motivate you to learn more than giving yourself a goal that you care about.

Resources

Getting a job

Who to talk to (in person)

  1. Fellow developers
    • Friends
    • Friends of friends
  2. People at co-working spaces (e.g. Trailhead)
    • People who regularly work there
    • People attending public events hosted there
  3. People at meetups
    • Founders/speakers
    • Fellow members

Where to look (online)

General

Dev specific

Startup

What to look for (in a company)

Most of these things you can only learn about by asking people who work there (interviewing the interviewer), reading about the organization online, or shadowing / experiencing the company for yourself. The goal is to have the best understanding possible of what a typical "day in the life" would be at the company before you accept any position there.

(Note: This unorganized list is just a starting point to provoke you to think about what you truly want your day-to-day job to be like. I highly encourage you to make your own list that fits your personal preferences — maybe even break it down into a list of must-have's and a list of nice-to-have's.)

  • "Work–life balance"
  • Training process (new hire onboard process)
  • Responsibilities and expectations (diversity, variety, focus, definition, clarity)
  • Collaboration, team work, and individual work
  • Definition and clarity of projects
  • Reactivity to the unpredictable
  • Sense of urgency
  • Pace and speed of work
  • Growth, development, progress, evolution (both for the organization and for individuals)
  • "Off-hours" expectations (spoken or unspoken)
  • Unspoken "policies"
  • Documentation of process and decisions
  • Definition and outline of policies, workflows, methods, roles, teams, and principles
  • Decision-making process
  • Leadership and management styles
  • Review procedures for people ("performance")
  • Metrics and measurements of "success" for goals, projects, and the organization overall
  • Vision, direction, and roadmap
  • Big picture overview of the purpose and people of the organization and teams
  • Motivations, motives, and excitement
  • Culture, personality, and values
  • Relationships between short-term and long-term goals
  • Forward-thinking objectives focused on the future
  • Autonomy and flexibility of teams and individuals
  • Expertise and mastery
  • Cross-team interaction / collaboration
  • Working environment and "office" setup (if applicable)
  • Tech stack: who chooses it, how it's chosen, and how/when it changes
  • Development and deployment workflow
  • Testing and quality assurance
  • Coding standards and styles
  • "Cleanliness" of the codebase
  • Size and scope of "backlog" and bugs
  • Code review process
  • How mistakes are handled
  • Contributions to open source
  • Contributions to the dev community outside the company

How to prepare for interviews

Try to predict what questions you'll be asked, and try to prepare your answers.

Behavioral

Here are general behavioral / informational questions you should try to prepare a story for:

  • Why do you want to work for us?
  • Why do you want to leave your current company?
  • Describe your biggest achievement and how you achieved it.
  • Describe your biggest programming challenge and you solved it.
  • What is a recent technical challenge you experienced and how did you solve it?
  • Where do you see yourself in 5 years?
  • What excites or interests you about coding?
  • Describe a stressful situation you experienced at work and how you handled it.
  • Describe a time when you had to resolve a conflict or difficult situation with a co-worker.
  • Describe a time when you made a mistake in your work. How did you handle it?
  • Describe a time when you were frustrated at work and how you made the situation better.
  • Describe a recent accomplishment that you're proud of.
  • Describe your favorite project that you've ever worked on.
  • Describe a time when you took initiative to go above and beyond in your work.

Technical

It's nearly impossible to outline the vast variety of technical questions you might encounter during an interview, because each interview varies per company. Here is a list of interview preparation resources instead:

And finally, for those of you who seek a job interview that doesn't involve using a whiteboard to solve CS trivia, technical puzzles, riddles, algorithms, or brainteasers, I give you a beautiful resource of a compiled list of companies that focus on discussing real world problems in interviews instead: Hiring Without Whiteboards (and its converse: They Whiteboarded Me)

General resources