<p class="noindent">
Today’s entry level market is more competitive than ever.<span class="intersentencespace"></span> If I troll reddit, I see headlines like <a href="https://www.reddit.com/r/cscareerquestions/comments/324rs5/where_are_all_the_truly_entrylevel_developer_jobs/" target="_blank" rel="noopener">Where are all the truly entry-level developer jobs?</a><span class="intersentencespace"></span> and <a href="https://www.reddit.com/r/cscareerquestions/comments/3nnx6v/looking_for_a_cs_job_makes_me_want_to_cry/" target="_blank" rel="noopener">Looking for a CS job makes me want to cry.</a>.
</p>
<p>
So how do you create a portfolio that make interviewers want to meet with you?<span class="intersentencespace"></span> That’s what we’re covering next.<span class="intersentencespace"></span> But first, let me tell you a story.
</p>
<p class="noindent">
So everytime I go shopping at Costco, I always end up buying more food than I intend.<span class="intersentencespace"></span> Some of the things I accidentally bought over the years: Butternut squash ravioli, egg rolls, chocoloate covered almonds, salami, and mango peach salsa.<span class="intersentencespace"></span> Now I pride myself on not making impulse purchases (or at least before I started going to Costco), and when I set foot in the store, I had no intention of buying.
</p>
<div id="uid1" data-tralics-id="uid1" class="subsection" data-number="1.1.1">
<h3>
<a href="#uid1" class="heading hyperref"><span class="number">1.1.1 </span>The power of a free sample</a>
</h3>
<p class="noindent">
The problem was I couldn’t pass up those free samples.<span class="intersentencespace"></span> And so I bought the ravioli, egg rolls, salsa, and salami.<span class="intersentencespace"></span> Every single time.<span class="intersentencespace"></span> And I ended up making an impulse purchase.
</p>
</div>
<div id="uid2" data-tralics-id="uid2" class="subsection" data-number="1.1.2">
<h3>
<a href="#uid2" class="heading hyperref"><span class="number">1.1.2 </span>So let your portfolio be a Costco free sample</a>
</h3>
<p class="noindent">
If you have limited experience and are trying to break into the tech industry, your portfolio is in essence your “free sample”.<span class="intersentencespace"></span> It’s the closest thing employers can do to “try before they buy.”
</p>
<p>
If you think about it investing in a junior level employee is a huge cost.<span class="intersentencespace"></span> There’s the time to train someone, salary, benefits and the fact they may move on after they get a year or two’s worth of experience.<span class="intersentencespace"></span> In the employer’s eyes, a junior employee can look like a really risky proposition, especially if they can’t produce to the level the company needs.
</p>
</div>
<div id="uid3" data-tralics-id="uid3" class="subsection" data-number="1.1.3">
<h3>
<a href="#uid3" class="heading hyperref"><span class="number">1.1.3 </span>And that’s why your portolio has to show you can produce the results</a>
</h3>
<p class="noindent">
I’d like you to repeat the following mantra over and over as you work through this process: “results first, job second.”<span class="intersentencespace"></span> The best way to convince someone to take a chance on you is to show them you’ve can produce (or can learn to produce) the results they are after.<span class="intersentencespace"></span> And the best way to do that is to have a strong slew of portfolio projects.
</p>
<p>
This is why I’m always encouraging new coders to have at least 6 to 8 well-developed projects in their portfolio.<span class="intersentencespace"></span> I want their “free samples” to make the employer want to “buy” them.
</p>
</div>
<p class="noindent">
Results are important.<span class="intersentencespace"></span> Of course, if no one knows about them, it doesn’t do you any good.
</p>
<p>
When I began my web development career through freelancing, I read up on marketing as I had never studied the field before.<span class="intersentencespace"></span> One thing I learned was the power of having testimonials in getting others to do business with you.
</p>
<div id="uid4" data-tralics-id="uid4" class="subsection" data-number="1.2.1">
<h3>
<a href="#uid4" class="heading hyperref"><span class="number">1.2.1 </span>“Know, Like, Trust”</a>
</h3>
<p class="noindent">
I remember reading a blog post or something from a marketer that said something to the effect of “people do business with those whom they know, like, and trust.”<span class="intersentencespace"></span> And nothing can convey that you are someone worth knowing and trusting than a testimonial from a third party.<span class="intersentencespace"></span> So do try and tastefully fit a testimonial on your porfolio site if you can, especially if you’re freelancing.
</p>
<p>
In fact, this phenomenon has a name and it’s called the primacy effect.<span class="intersentencespace"></span> The primacy effect <a href="http://psychologydictionary.org/primacy-effect/" target="_blank" rel="noopener">“is characterized by a tendency on the part of an observer to be more influenced by items and facts that are presented earlier than others”</a>.
</p>
<p>
Said another way, first impressions count for a lot.<span class="intersentencespace"></span> And testimonials can help shape that impression.
</p>
</div>
<div id="uid5" data-tralics-id="uid5" class="subsection" data-number="1.2.2">
<h3>
<a href="#uid5" class="heading hyperref"><span class="number">1.2.2 </span>The Questions To Ask To Get Really Great Testimonials</a>
</h3>
<p class="noindent">
One of the things that make for believable testimonials are long detailed testimonials that tell a great story of your work.<span class="intersentencespace"></span> But how do you get these testimonials?
</p>
<p>
Here are the 6 questions I always ask after every client engagement.<span class="intersentencespace"></span> I pulled them from <a href="http://www.copyblogger.com/testimonials-part-2/" target="_blank" rel="noopener">Copyblogger</a>.<span class="intersentencespace"></span> They come from Sean D’Souza, a great marketer who runs the psychotactics.com marketing website.
</p>
<blockquote class="quotation">
<ol>
<li>
What was the obstacle that would have prevented you from buying this product?<span class="intersentencespace"></span>
</li>
<li>
What did you find as a result of buying this product?<span class="intersentencespace"></span>
</li>
<li>
What specific feature did you like most about this product?<span class="intersentencespace"></span>
</li>
<li>
What are three other benefits of this product?<span class="intersentencespace"></span>
</li>
<li>
Would you recommend this product?<span class="intersentencespace"></span> If so, why?<span class="intersentencespace"></span>
</li>
<li>
Is there anything you’d like to add?<span class="intersentencespace"></span>
</li>
</ol>
</blockquote>
<p>
In practice, with these questions, I found I got really great long form testimonials.<span class="intersentencespace"></span> Sometimes I had to clarify what the testimonial giver mean in real-time, but overall it worked extremely well.<span class="intersentencespace"></span> Now you may obviously substitute the word “service” for product.
</p>
</div>
<div id="uid12" data-tralics-id="uid12" class="subsection" data-number="1.2.3">
<h3>
<a href="#uid12" class="heading hyperref"><span class="number">1.2.3 </span>3 Tips for Ensuring a Smooth Testimonial</a>
</h3>
<div id="uid13" data-tralics-id="uid13" class="subsubsection" data-number="1.2.3.1">
<h4>
<a href="#uid13" class="heading">Tip 1: Record It</a>
</h4>
<p class="noindent">
Make sure you ask the testimonial giver if it’s ok to record the testimonial and display it publicly since in places like California, it’s illegal to record someone without their consent.<span class="intersentencespace"></span> Besides the legalities, it’s also because you want to be able to focus on your listener without having to worry about taking notes or remembering what they say.
</p>
<p>
Then you can go back through the testimonial and easily pull out the pieces that you need.
</p>
</div>
<div id="uid14" data-tralics-id="uid14" class="subsubsection" data-number="1.2.3.2">
<h4>
<a href="#uid14" class="heading">Tip 2: Transcribe It</a>
</h4>
<p class="noindent">
Since the testimonial is likely to be 15 to 30 minutes long, you may want to pay someone on a site like Upwork to transcribe it.<span class="intersentencespace"></span> This is what I did when I was starting out.
</p>
</div>
<div id="uid15" data-tralics-id="uid15" class="subsubsection" data-number="1.2.3.3">
<h4>
<a href="#uid15" class="heading">Tip 3: Display It</a>
</h4>
<p class="noindent">
Incorporate the testimonial into your portfolio.<span class="intersentencespace"></span> Display it somewhere.<span class="intersentencespace"></span> Perhaps make the audio (or part of the audio) downloadable.<span class="intersentencespace"></span> The point is make it easy for someone viewing your body of work to see the positive reference associated with it.
</p>
</div>
</div>
<p class="noindent">
What do you do if you have no clients?<span class="intersentencespace"></span> I imagine if you’re just starting out, you might be thinking how do I get testimonials for my work in a brand new field?
</p>
<div id="uid16" data-tralics-id="uid16" class="subsection" data-number="1.3.1">
<h3>
<a href="#uid16" class="heading hyperref"><span class="number">1.3.1 </span>You get testimonials from your other fields</a>
</h3>
<p class="noindent">
The easiest thing to do when you’re starting out and have no clients is to get testimonials from others who have worked with you before.<span class="intersentencespace"></span> If you’re a Marine, you probably have fellow soldiers who can attest to your work ethic or what it’s like serving in the trenches with you.
</p>
<p>
If you’re in high school or college, perhaps you get a testimonial from a friend who worked with you at a part-time job.
</p>
<p>
Is it ideal?<span class="intersentencespace"></span> No.<span class="intersentencespace"></span> Is it better than nothing?<span class="intersentencespace"></span> Absolutely, particularly if you use the 6 questions from the previous section.
</p>
</div>
<div id="uid17" data-tralics-id="uid17" class="subsection" data-number="1.3.2">
<h3>
<a href="#uid17" class="heading hyperref"><span class="number">1.3.2 </span>Volunteering</a>
</h3>
<p class="noindent">
Now if you’re really stuck, consider volunteering.<span class="intersentencespace"></span> It’d be great if you can find a way to volunteer to do a friend’s website or something involving technology, but if you can’t then volunteering can be another great way to get testimonials.
</p>
</div>
<p class="noindent">
So what is a standout portfolio?<span class="intersentencespace"></span> It’s the kind of portfolio you see that makes you go “Ooh”.<span class="intersentencespace"></span> The one that moves you to say “let’s hire this person.”
</p>
<p>
But can such a portfolio exist and how do you make one?
</p>
<p>
The standout portfolio consists of 5 elements:
</p>
<ol>
<li>
Projects that show you’re a good fit for the company
</li>
<li>
Proof that you’re great to work with
</li>
<li>
Proof that you’re capable of learning on the job
</li>
<li>
Show as much depth as you can in the area you’re applying for
</li>
<li>
Technical elements of a portfolio
</li>
</ol>
<p>
We’ll cover each of the areas shortly, but first I need to introduce you the idea of “working backwards” to build the right portfolio.
</p>
<div id="uid23" data-tralics-id="uid23" class="subsection" data-number="1.4.1">
<h3>
<a href="#uid23" class="heading hyperref"><span class="number">1.4.1 </span>How Working Backwards Can Help You Build the Right Portfolio</a>
</h3>
<p class="noindent">
Now to keep things simple, I’m going to assume you’re trying to land one of 3 types of positions: front end web developer, back end web developer, or fullstack web developer.<span class="intersentencespace"></span> If you’re looking at data science or machine learning positions, these principles apply, but it also tells me you have the experience and probably don’t need to read this guide!.
</p>
<div id="uid24" data-tralics-id="uid24" class="subsubsection" data-number="1.4.1.1">
<h4>
<a href="#uid24" class="heading">Step 1: Begin with the end in mind and stick with it</a>
</h4>
<p class="noindent">
The first step is easy.<span class="intersentencespace"></span> Pick a specialization and stick with it.<span class="intersentencespace"></span> I’ve done dozens of interviews with new coders trying to break in.<span class="intersentencespace"></span> The number one mistake I see is wasted time due to an inability to pick a specialization and stick with it.<span class="intersentencespace"></span> I hear things like “I’m interested in Python but I’m also interested in front end and I’d also like to be full stack….blah blah blah”.
</p>
<p>
The most productive people I know at my company tend to have their specialities.<span class="intersentencespace"></span> I’ve worked with one front end coder who did an amazing job setting up a ReactJS search interface.<span class="intersentencespace"></span> But again, they specialized.<span class="intersentencespace"></span> They didn’t try to be a “ninja” in all the things.
</p>
</div>
<div id="uid25" data-tralics-id="uid25" class="subsubsection" data-number="1.4.1.2">
<h4>
<a href="#uid25" class="heading">Step 2: Have a general understanding what your specialization does on a daily basis and write down specific skills you should have</a>
</h4>
<p class="noindent">
Now understand, that different companies have different needs so what a developer at one company does on a daily basis might differ, but overall their tasks will require roughly the same skill sets.<span class="intersentencespace"></span> As an example, a front end developer might take a comp from a designer and turn it into HTML, CSS, and JavaScript code to power a form submission by an end user.<span class="intersentencespace"></span> They may team with a backend developer to ensure that this submission of data goes through.
</p>
<p>
So what are the specific skills you would write down?<span class="intersentencespace"></span> You know that you’d need to know HTML, CSS, and perhaps ReactJS (if that’s what the hypothetical front end developer used).<span class="intersentencespace"></span> You might have to know how to make the form mobile responsive.
</p>
<p>
The quickest way to get a general understanding is to talk to do some quick online research.<span class="intersentencespace"></span> You can google “what does a front end developer do?”.<span class="intersentencespace"></span> You can also ask the question on quora or reddit to get some answers.<span class="intersentencespace"></span> Or you can talk to people in real life by attending a local meetup.
</p>
</div>
<div id="uid26" data-tralics-id="uid26" class="subsubsection" data-number="1.4.1.3">
<h4>
<a href="#uid26" class="heading">Step 3: Now pick some projects</a>
</h4>
<p class="noindent">
Now that you know what skills are required, try to brainstorm 3-5 projects you can take on that would give you this knowledge.<span class="intersentencespace"></span> If you’re stuck for ideas, don’t worry, we’ll give you some project ideas in upcoming sections of this guide.<span class="intersentencespace"></span> But before looking at those, I encourage you to try and come up with your own.<span class="intersentencespace"></span> Just set a timer for 15-20 minutes and go.<span class="intersentencespace"></span> Use Google or any tool at your disposal.
</p>
</div>
</div>
<div id="uid27" data-tralics-id="uid27" class="subsection" data-number="1.4.2">
<h3>
<a href="#uid27" class="heading hyperref"><span class="number">1.4.2 </span>The 5 Elements of a Standout Portfolio</a>
</h3>
<p class="noindent">
As promised, let’s talk about the 5 elements of a standout portfolio.<span class="intersentencespace"></span> Now a bit of a caveat that’s good news.<span class="intersentencespace"></span> Because the demand for programmers is so high, I’d conjecture that you don’t have to get everything 100% right.<span class="intersentencespace"></span> Be open to making mistakes and learning from the process.<span class="intersentencespace"></span> As you go through it, you’ll only become a stronger candidate.
</p>
<div id="uid28" data-tralics-id="uid28" class="subsubsection" data-number="1.4.2.1">
<h4>
<a href="#uid28" class="heading">Element 1 Picking Projects To Show You’re a Good Fit</a>
</h4>
<p class="noindent">
Now one thing that can help you more easily distinguish yourself is having a portfolio of projects that shows you’re a good fit.<span class="intersentencespace"></span> But how?
</p>
<p>
Option 1: Use the company’s software (or the software that the company uses)
</p>
<p>
Does the company have an API or software that it uses?<span class="intersentencespace"></span> Try to use that API in your project.<span class="intersentencespace"></span> For example, if you’re applying for a media company that pulls data from Facebook, you might try spinning up a project that uses Facebook APIs and associated ata.
</p>
<p>
Option 2: Do a project that involves the company’s line of business (or is closely related to it)
</p>
<p>
Are you applying for a sports company?<span class="intersentencespace"></span> Then perhaps doing a project that involves sports would be a great idea.<span class="intersentencespace"></span> For example, if you’re applying for a front end position with a company that provides equipment for sports teams, perhaps you could make a front end project that involves a new design for ordering.
</p>
</div>
<div id="uid29" data-tralics-id="uid29" class="subsubsection" data-number="1.4.2.2">
<h4>
<a href="#uid29" class="heading">Element 2 Proof that you’re great to work with</a>
</h4>
<p class="noindent">
As I’m’ writing this, <a href="https://www.amazon.com/gp/bestsellers/books/3/ref=pd_zg_hrsr_b_3_2" target="_blank" rel="noopener">The No Asshole Rule</a> remains one of the top 10 sellers in the Amazon bookstore.<span class="intersentencespace"></span> While it’s a great book, the reason I bring it up is because working with people is 80-90% of the job.
</p>
<p>
So people will want to work with someone that is great to work with.<span class="intersentencespace"></span> While people might define a great teammate slightly differently, I think the following general characteristics are shared by all:
</p>
<ul>
<li>
Treats others with professional respect – Do you behave professionally?<span class="intersentencespace"></span> Do you respect others’ boundaries and not make demeaning remarks about others?<span class="intersentencespace"></span>
</li>
<li>
Do you do what you say you are going to do and complete projects well and on-time?<span class="intersentencespace"></span> If other team members are having to pick up the additional load that’s not great.<span class="intersentencespace"></span>
</li>
</ul>
<p>
And one easy way to indicate this is through testimonials.
</p>
</div>
<div id="uid32" data-tralics-id="uid32" class="subsubsection" data-number="1.4.2.3">
<h4>
<a href="#uid32" class="heading">Element 3 Proof that you’re capable of learning on the job</a>
</h4>
<p class="noindent">
One of the harder things in technology is keeping up with all the new technology.<span class="intersentencespace"></span> Element 3 can be a bit trickier to prove when you’re first starting out.
</p>
<p>
My suggestion is to read up on the current trends in your specialization of choice.<span class="intersentencespace"></span> For example, if you’re a front end developer, then you might want to read up on the current JavaScript tooling and frameworks (which constantly change as I write this).
</p>
<p>
Not only be conversant in them, but also apply them in your projects.
</p>
<p>
One great story that has a lot of lessons in it is <a href="http://www.businessinsider.com/silicon-valley-engineer-negotiated-a-starting-salary-from-120k-to-250k-in-just-a-few-weeks-2016-4" target="_blank" rel="noopener">this one.</a>
</p>
</div>
<div id="uid33" data-tralics-id="uid33" class="subsubsection" data-number="1.4.2.4">
<h4>
<a href="#uid33" class="heading">Element 4 Show as much depth as you can in the area you’re applying for</a>
</h4>
<p class="noindent">
As a beginner, you’re limited by your experience.<span class="intersentencespace"></span> So how can you show depth?<span class="intersentencespace"></span> You can show it by reading a book on the syntax of the language of your choice and trying to understand the nuances.<span class="intersentencespace"></span> For example, as Ruby programmers, one thing I’ve found that comes up over and over again is an understanding of blocks, procs, and lambdas.<span class="intersentencespace"></span> If you’re mastering JavaScript, you’d want to know about prototypes and inheritance.
</p>
<p>
The point is, pick “one area” of your technology stack and try to learn as much as you can about it.
</p>
</div>
<div id="uid34" data-tralics-id="uid34" class="subsubsection" data-number="1.4.2.5">
<h4>
<a href="#uid34" class="heading">Element 5 Technical Details</a>
</h4>
<ul>
<li>
Adopt the Google <a href="https://developers.google.com/speed/pagespeed/insights/" target="_blank" rel="noopener">PageSpeed Insights</a> recommendations and try to get your score up to 90% for both mobile and desktop.<span class="intersentencespace"></span>
</li>
<li>
Make your portfolio easy to navigate – Keep in mind a hiring manager has limited time to browse your portfolio.<span class="intersentencespace"></span> So make it easy to navigate (on mobile and desktop).<span class="intersentencespace"></span>
</li>
<li>
Responsive for mobile – Ensure your site design displays well on a mobile device.<span class="intersentencespace"></span> I use responsive frameworks like Bootstrap and Yahoo Pure.<span class="intersentencespace"></span> The framework doesn’t matter so much as that it looks good, especially if you are a front end developer.<span class="intersentencespace"></span>
</li>
<li>
Great UI elements and design (spacing, colors, etc.)<span class="intersentencespace"></span> – One thing I’ve seen from new coders, especially those trying to crack into the front end space is weird spacing between fonts or poor color choices like “rainbows”.<span class="intersentencespace"></span> A great book for understanding the basics of design is <a href="https://www.amazon.com/Non-Designers-Design-Book-4th/dp/0133966151" target="_blank" rel="noopener">The Non Designer’s Design Book</a>.<span class="intersentencespace"></span>
</li>
<li>
MVP Portfolio – I was having a conversation recently with someone who was trying to break into the tech industry as a front end developer.<span class="intersentencespace"></span> They had a traditional Computer Science background but took a detour into another career and wanted to get back in.<span class="intersentencespace"></span> It was hard to evaluate where they were because they didn’t have any side projects to show.<span class="intersentencespace"></span>
</li>
</ul>
<p class="noindent">
This is why I advise newbies to expand your portfolio to 6-8 projects.<span class="intersentencespace"></span> The idea is to show them you’re constantly shipping stuff and learning.<span class="intersentencespace"></span> Remember, you have no experience, so you want to convey the idea that you are capable of learning and growing.
</p>
<ul>
<li>
Get some focused projects in your portfolio that match your specialization – If you’re a front end developer, you want to be doing projects that showcase your front end skills.<span class="intersentencespace"></span> It’s fine to have a backend project (or more), but ideally you’re tailing your portfolio to the job you want with the time you have.<span class="intersentencespace"></span>
</li>
</ul>
<p>
Here’s an example of a cool JavaScript <a href="https://github.com/Julienh/Sharrre/blob/master/src/js/jquery.sharrre.js" target="_blank" rel="noopener">project that I would consider to place you at expert level – sharrre.</a>
</p>
<ul>
<li>
Blogging – As if all the above is not enough work, I also advise people to start blogging about what they learn.<span class="intersentencespace"></span> For people with full-time jobs who are learning how to code, this can seem like a big ask on top of all the other things they have to do.<span class="intersentencespace"></span>
</li>
</ul>
<p>
But if you don’t believe me, check out the story of <a href="https://forum.freecodecamp.com/t/job-offer-accepted-20k-more-than-current-salary-thanks-fcc-story-of-how-i-did-it/" target="_blank" rel="noopener">Beau Carnes</a>.<span class="intersentencespace"></span> He did video blogging with YouTube and if you read his forum post, you can see that he really actively marketed himself.<span class="intersentencespace"></span> So I hope this opens you up to some ideas of how you can use blogging effectively to help you land a job.
</p>
</div>
</div>
<p class="noindent">
One of the great things about being new is that there are a lot of projects out there that can help level up your skills.<span class="intersentencespace"></span> Just doing a simple application where a front end talks to a back end API can teach you a lot of things.
</p>
<p>
But if you’re stuck for ideas, here are some suggestions:
</p>
<ol>
<li>
<a href="http://freecodecamp.com/" target="_blank" rel="noopener">FreeCodeCamp Projects</a> – FreeCodeCamp has a list of projects that you can choose from.<span class="intersentencespace"></span> If you’re going through the curriculum, then the series of projects you’ll do can help you get a starter portfolio goin.<span class="intersentencespace"></span>
</li>
<li>
MOOCs (massive open online courses) – So while MOOCs like <a href="https://www.coursera.org/" target="_blank" rel="noopener">Coursera</a> are more academic in nature, you can use it to get some ideas for projects.<span class="intersentencespace"></span> For example, if you’re going through an algorithms course, one possible project is to create a github repository of algorithms you learned with sample data sets.<span class="intersentencespace"></span>
</li>
<li>
Paid courses – I have yet to try a course from Udemy or Codecademy, but other students have told me about them.<span class="intersentencespace"></span> Udemy for instance has some courses where you build projects as part of the learning.<span class="intersentencespace"></span>
</li>
<li>
Online google search – You can also just randomly search Google for project ideas.<span class="intersentencespace"></span> Try typing in phrases like “software project ideas” and see what comes up.<span class="intersentencespace"></span> I’ve found some interesting ones by doing this.<span class="intersentencespace"></span>
</li>
</ol>
<p class="noindent">
Now if you’re anything like me, you’d really like it if someone just laid out some project ideas for you.<span class="intersentencespace"></span> So that’s what this chapter is about.<span class="intersentencespace"></span> I’m going to lay out 20 handpicked portfolio project ideas.<span class="intersentencespace"></span> I’ll list them in order of easiest to hardest.<span class="intersentencespace"></span> I’ll also go into the skills each project will help you showcase and develop.
</p>
<p>
So a lot of these project ideas come from <a href="https://github.com/karan/Projects" target="_blank" rel="noopener">this GitHub repo</a> especially since I take my own advice about using Google :).
</p>
<p>
As I suggest project ideas, I’m going to follow the following template.
</p>
<ul>
<li>
<strong>Idea</strong> – I will suggest an idea.<span class="intersentencespace"></span>
</li>
<li>
<strong>Skills developed/showcased</strong> – Then I will talk about the skills you will develop and showcase to potential employers.<span class="intersentencespace"></span>
</li>
</ul>
<div id="uid48" data-tralics-id="uid48" class="subsection" data-number="1.6.1">
<h3>
<a href="#uid48" class="heading hyperref"><span class="number">1.6.1 </span>Idea 1 – Front End Todo List in Native JavaScript</a>
</h3>
<p class="noindent">
I remember when I started, I did a todo list in Rails.<span class="intersentencespace"></span> In fact, I used <a href="http://www.binarywebpark.com/tutorial-a-sample-todo-app-with-padrino-and-angularjs-part-1/" target="_blank" rel="noopener">this as a project in my portfolio</a>.
</p>
<p>
<strong>Idea</strong> – But the actual <strong>idea</strong> I want you to focus on is doing a Todo List in native JavaScript.<span class="intersentencespace"></span> If you need to store todo items, then store it in localStorage.
</p>
<p>
<strong>Skills developed/showcased</strong> – This project will show that you understand the basics of JavaScript and can ship a basic working front end project.<span class="intersentencespace"></span> If you do a good job on the design, it can also showcase your design chops and CSS/HTML skills.
</p>
</div>
<div id="uid49" data-tralics-id="uid49" class="subsection" data-number="1.6.2">
<h3>
<a href="#uid49" class="heading hyperref"><span class="number">1.6.2 </span>Idea 2 – Front End Todo List Using a JavaScript Framework</a>
</h3>
<p class="noindent">
<strong>Idea</strong> – So unlike the previous idea, the actual <strong>idea</strong> you’re going to do a todo list using a modern JavaScript framework.<span class="intersentencespace"></span> Try to pick one of the more popular frameworks like React, Angular, Ember or Vue (at the time of this writing, 5/30/17).<span class="intersentencespace"></span> Because the JavaScript landscape changes so much, you might need to pick a different framework than the suggested ones.
</p>
<p>
<strong>Skills developed/showcased</strong> – Ideally, this project will let you showcase your knowledge of not only basic JavaScript, but the fact you’re aware of the trends (modern framework) going on in front end land.<span class="intersentencespace"></span> Ideally, you’d incorporate the modern web tooling such as webpack (again, which could change 6 months from now, so research if you’re not sure) and redux if you decide to do a React project for example.
</p>
</div>
<div id="uid50" data-tralics-id="uid50" class="subsection" data-number="1.6.3">
<h3>
<a href="#uid50" class="heading hyperref"><span class="number">1.6.3 </span>Idea 3 – Credit Card Validator on an HTML Form</a>
</h3>
<p class="noindent">
<strong>Idea</strong> – In this project, you’ll take a credit card number from a common credit card vendor (Visa, MasterCard, American Express, Discoverer) and make sure that it is a valid number (Hint: research credit cards and checksums).<span class="intersentencespace"></span> You don’t need to have a working backend, just have it so when the user clicks the “Submit” button on a form, the number is validated.<span class="intersentencespace"></span> Display an error message if the number is invalid.
</p>
<p>
<strong>Skills developed/showcased</strong> – This will help showcase your JavaScript skills, ability to research a topic you’re not familiar with (checksums), and some basic UI skills (styling of error messages).<span class="intersentencespace"></span> You can even do 2 versions of the form – one with vanilla JavaScript and the other with a popular framework like Angular or React.
</p>
</div>
<div id="uid51" data-tralics-id="uid51" class="subsection" data-number="1.6.4">
<h3>
<a href="#uid51" class="heading hyperref"><span class="number">1.6.4 </span>Idea 4 – Complex Number Algebra</a>
</h3>
<p class="noindent">
<strong>Idea</strong> – Write a JavaScript code to do addition, multiplication, negation, and inversion of complex numbers in separate functions.<span class="intersentencespace"></span> (Hint: Implementing the previous operations will let you do division and subtraction).<span class="intersentencespace"></span> Print out some results.
</p>
<p>
<strong>Extra front end challenge</strong> – Make a user interface with HTML/CSS.
</p>
<p>
<strong>Skills developed/showcased</strong> – This will help you showcase your JavaScript skills (or whatever language you choose), ability to research a topic you’re not familiar with (if you’re not clear on complex numbers), and start giving potential employers an ability of how maintainable your code is.<span class="intersentencespace"></span> For example, when you’re done, does your JavaScript code look like a hot mess?<span class="intersentencespace"></span> Or does it look neat and clean?<span class="intersentencespace"></span> Don’t worry about what it looks like for now, we’ll talk about “clean code” later.
</p>
</div>
<div id="uid52" data-tralics-id="uid52" class="subsection" data-number="1.6.5">
<h3>
<a href="#uid52" class="heading hyperref"><span class="number">1.6.5 </span>Idea 5 – Implement a Bubble Sorting Algorithm and one other sorting algorithm</a>
</h3>
<p class="noindent">
<strong>Idea</strong> – Implement the bubble sort algorithm in the language of your choice.<span class="intersentencespace"></span> Then implement a quick sort or merge sort algorithm.
</p>
<p>
<strong>Extra front end challenge</strong> – Make a front end visualization of some kind showing the results as they are being sorted.<span class="intersentencespace"></span> This is not for the faint of heart!
</p>
<p>
<strong>Skills developed/showcase</strong> – This will not only help you showcase your JavaScript skills (or other language of your choice), it will also help show that you can understand sorting algorithms.<span class="intersentencespace"></span> An understanding of data structures and algorithms is the key to getting into companies like Facebook or Google.
</p>
</div>
<div id="uid53" data-tralics-id="uid53" class="subsection" data-number="1.6.6">
<h3>
<a href="#uid53" class="heading hyperref"><span class="number">1.6.6 </span>Idea 6 – Implement the Sieve of Eratosthenes</a>
</h3>
<p class="noindent">
<strong>Idea</strong> – Using your language of choice, implement the Sieve of Eratosthenes.<span class="intersentencespace"></span> This is a mathematical algorithm to find prime numbers.
</p>
<p>
<strong>Skills developed/showcased</strong> – This will help you showcase your ability to implement algorithms and your skill in the language you chose.
</p>
</div>
<div id="uid54" data-tralics-id="uid54" class="subsection" data-number="1.6.7">
<h3>
<a href="#uid54" class="heading hyperref"><span class="number">1.6.7 </span>Idea 7 – RPN calculator</a>
</h3>
<p class="noindent">
<strong>Idea</strong> – Implement a reverse polish notation calculator.<span class="intersentencespace"></span> If you’re not familiar with it, RPN is a notation in which mathematical operators appear after the operands.<span class="intersentencespace"></span> Below is an example:
</p>
<p>
<em>4 6 +</em>
</p>
<p>
This statement is equivalent to saying “4+6” (which equals 10).
</p>
<p>
<strong>Skills developed/showcased</strong> – This will help showcase your ability to deal with data structures like stacks and queues (most implementations I’ve seen of this use a stack of some kind) as well as apply them to a problem domain.<span class="intersentencespace"></span> If you’re a backend developer, then you can write a command line type program where you enter “4 6 +” at the command prompt.<span class="intersentencespace"></span> If you’re a front end developer, you may want to have an input box where people enter “4 6 +” or whatever RPN expression.
</p>
</div>
<div id="uid55" data-tralics-id="uid55" class="subsection" data-number="1.6.8">
<h3>
<a href="#uid55" class="heading hyperref"><span class="number">1.6.8 </span>Idea 8 – String Report</a>
</h3>
<p class="noindent">
<strong>Idea</strong> – Have a program read a blob of text (or a text file) and print out a report that contains: the number of words and the number of vowels in the text.
</p>
<p>
<strong>Extra challenge</strong> – You can also have your report print out a count by vowel (e.g., the number of e’s, a’s, etc.)
</p>
<p>
<strong>Skills developed/showcased</strong> – This will showcase your facility to process strings in your given language as well as familiarity with basic libraries available to you.<span class="intersentencespace"></span> It will probably help showcase where you are at in terms of being able to write “maintainable” code.
</p>
</div>
<div id="uid56" data-tralics-id="uid56" class="subsection" data-number="1.6.9">
<h3>
<a href="#uid56" class="heading hyperref"><span class="number">1.6.9 </span>Idea 9 – RSS Feed Builder</a>
</h3>
<p class="noindent">
<strong>Idea</strong> – Given an RSS or Atom Feed link, get all posts and display them in a user-friendly format.
</p>
<p>
<strong>Skills developed/showcased</strong> – This will showcase your ability to parse through a well-defined formatted specification and then convert that into a user friendly presentation.<span class="intersentencespace"></span> You’ll probably also figure out how to make HTTP calls and possibly paginate through a list of posts to display them.
</p>
</div>
<div id="uid57" data-tralics-id="uid57" class="subsection" data-number="1.6.10">
<h3>
<a href="#uid57" class="heading hyperref"><span class="number">1.6.10 </span>Idea 10 – Command Line Cipher</a>
</h3>
<p class="noindent">
<strong>Idea</strong> – A cipher is a function for encrypting messages.<span class="intersentencespace"></span> Build a command line tool that lets you encode and decode a message based on a cipher.
</p>
<p>
<strong>Skills developed/showcased</strong> – You’ll most likely end up learning about using the modulus math operator as well as how to build a command line program.<span class="intersentencespace"></span> This will showcase your ability to put together a relatively simple command line interface and let someone see how you organize your code.
</p>
</div>
<div id="uid58" data-tralics-id="uid58" class="subsection" data-number="1.6.11">
<h3>
<a href="#uid58" class="heading hyperref"><span class="number">1.6.11 </span>Idea 11 – Regex Matching Tool</a>
</h3>
<p class="noindent">
<strong>Idea</strong> – Build a clone of something like rubular.com in your chosen language.<span class="intersentencespace"></span> A user can enter a regular expression pattern and a series of strings to see if any matches are found.
</p>
<p>
<strong>Skills developed/showcased</strong> – You’ll learn about regular expression matching in the language of your choice.
</p>
</div>
<div id="uid59" data-tralics-id="uid59" class="subsection" data-number="1.6.12">
<h3>
<a href="#uid59" class="heading hyperref"><span class="number">1.6.12 </span>Idea 12 – Port Scanner</a>
</h3>
<p class="noindent">
<strong>Idea</strong> – “Enter an IP address and a port range where the program will then attempt to find open ports on the given computer by connecting to each of them.<span class="intersentencespace"></span> On any successful connections mark the port as open.”
</p>
<p>
<strong>Skills developed/showcased</strong> – You’ll learn what facilities your programming language of choice has for connecting to ports and handling IP addresses.
</p>
</div>
<div id="uid60" data-tralics-id="uid60" class="subsection" data-number="1.6.13">
<h3>
<a href="#uid60" class="heading hyperref"><span class="number">1.6.13 </span>Idea 13 – Recipe Class and Program</a>
</h3>
<p class="noindent">
<strong>Idea</strong> – Create a recipe class with ingredients / measurements and build a recipe manager program around this.
</p>
<p>
<strong>Extra challenge</strong> – Build a front end web interface around this so a user can add, delete, and/or edit recipes.<span class="intersentencespace"></span> Let them tag recipes with categories.
</p>
<p>
<strong>Skills developed/showcased</strong> – You’ll showcase your ability to write object-oriented code (assuming you use an object-oriented language), which could be regarded as something similar you might do at a workplace.
</p>
</div>
<div id="uid61" data-tralics-id="uid61" class="subsection" data-number="1.6.14">
<h3>
<a href="#uid61" class="heading hyperref"><span class="number">1.6.14 </span>Idea 14 – Bulk Thumbnail Creator</a>
</h3>
<p class="noindent">
<strong>Idea</strong> – Build a web application that allows a user to upload multiple images and convert them into “thumbnail” size images (you decide what the size of the thumbnail is).
</p>
<p>
<strong>Extra challenge</strong> – Show a progress bar as all the images you are converting to thumbnails are being processed.
</p>
<p>
<strong>Skills developed/showcased</strong> – You’ll learn a bit about downsampling images and building an animated progress bar if you do the extra challenge.
</p>
</div>
<div id="uid62" data-tralics-id="uid62" class="subsection" data-number="1.6.15">
<h3>
<a href="#uid62" class="heading hyperref"><span class="number">1.6.15 </span>Idea 15 – Bandwidth Monitor</a>
</h3>
<p class="noindent">
<strong>Idea</strong> – A small utility program that tracks how much data you have uploaded and downloaded from the net during the course of your current online session.<span class="intersentencespace"></span> See if you can find out what periods of the day you use more and less and generate a report or graph that shows it.
</p>
<p>
<strong>Skills developed/showcased</strong> – This will teach you about how your computer uploads and downloads data.<span class="intersentencespace"></span> You’ll probably also showcase some data visualization skills if you create a graph to show the data.
</p>
</div>
<div id="uid63" data-tralics-id="uid63" class="subsection" data-number="1.6.16">
<h3>
<a href="#uid63" class="heading hyperref"><span class="number">1.6.16 </span>Idea 16 – Database Report Generator Utility</a>
</h3>
<p class="noindent">
<strong>Idea</strong> – Create a utility that generates a report based on some tables in a SQL database.<span class="intersentencespace"></span> For example, generate an inventory report based on the number of orders for a particular set of items or sum up the days current database activity.
</p>
<p>
<strong>Skills developed/showcased</strong> – You’ll be showcasing your knowledge of basic SQL and how to extract those results into something useful.
</p>
</div>
<div id="uid64" data-tralics-id="uid64" class="subsection" data-number="1.6.17">
<h3>
<a href="#uid64" class="heading hyperref"><span class="number">1.6.17 </span>Idea 17 – Web Based PDF Generator</a>
</h3>
<p class="noindent">
<strong>Idea</strong> – A web application which can read in a text file, html file or some other file and generates a PDF file out of it.<span class="intersentencespace"></span> You can have a user upload the file and have your program spit out a PDF of it.
</p>
<p>
<strong>Skills developed/showcased</strong> – This will let you showcase your skills at making a web application that does something practical.<span class="intersentencespace"></span> Assuming you don’t use a pdf converter plugin and you write the conversion algorithm yourself, you’ll learn about PDF formatting.
</p>
</div>
<div id="uid65" data-tralics-id="uid65" class="subsection" data-number="1.6.18">
<h3>
<a href="#uid65" class="heading hyperref"><span class="number">1.6.18 </span>Idea 18 – Eulerian Path</a>
</h3>
<p class="noindent">
<strong>Idea</strong> – Create a program which will take as an input a graph and output either a Eulerian path or a Eulerian cycle, or state that it is not possible.<span class="intersentencespace"></span> A Eulerian Path starts at one node and traverses every edge of a graph through every node and finishes at another node.<span class="intersentencespace"></span> A Eulerian cycle is a eulerian Path that starts and finishes at the same node.
</p>
<p>
<strong>Skills developed/showcased</strong> – This will help showcase your ability to deal with data structures and algorithms.<span class="intersentencespace"></span> It’s also a large enough program that I think it will show a prospective employer how you deal with larger projects.
</p>
</div>
<div id="uid66" data-tralics-id="uid66" class="subsection" data-number="1.6.19">
<h3>
<a href="#uid66" class="heading hyperref"><span class="number">1.6.19 </span>Idea 19 – Connected Graph</a>
</h3>
<p class="noindent">
<strong>Idea</strong> – Create a program which takes a graph as an input and tells the user whether or not every node is connected.<span class="intersentencespace"></span> Now this one is a bit of a challenge.<span class="intersentencespace"></span> You’re going to have to make a few decisions.<span class="intersentencespace"></span> You’ll have to: 1) decided on the input format for your graph.<span class="intersentencespace"></span> 2) Research and implement an algorithm to tell you whether the graph is connected.
</p>
<p>
<strong>Skills developed/showcased</strong> – This will help showcase your ability to deal with data structures and algorithms.<span class="intersentencespace"></span> It’s also a large enough program that I think it will show a prospective employer how you deal with larger projects.
</p>
<ul>
<li>
How do you know when you’ve got a good enough portfolio?<span class="intersentencespace"></span>
</li>
<li>
10 ideas for showcasing your work
</li>
</ul>
</div>
<div id="uid69" data-tralics-id="uid69" class="subsection" data-number="1.6.20">
<h3>
<a href="#uid69" class="heading hyperref"><span class="number">1.6.20 </span>Idea 20 – Inverted Index</a>
</h3>
<p class="noindent">
<strong>Idea</strong> – An Inverted Index is a data structure used to create full text search.<span class="intersentencespace"></span> Given a set of text files, implement a program to create an inverted index.<span class="intersentencespace"></span> Also create a user interface to do a search using that inverted index which returns a list of files that contain the query term / terms.<span class="intersentencespace"></span> The search index can be in memory.
</p>
<p>
<strong>Skills developed/showcased</strong> – This is probably a good “stretch” project.<span class="intersentencespace"></span> It’s going to require you to research what an inverted index is and how to implement it.<span class="intersentencespace"></span> In addition, you’ll have to make something practical out of that knowledge.
</p>
<p>
And there you have it – 20 ideas to help you build a portfolio!<span class="intersentencespace"></span> Within this list, I tried to stack things in order of easiest to hardest.
</p>
</div>
<p class="noindent">
So there are many options for hosting your portfolio.<span class="intersentencespace"></span> Personally, I think the easiest one is to use GitHub pages.<span class="intersentencespace"></span> It’s free and you don’t have to even worry about registering a domain or anything like that.<span class="intersentencespace"></span> If your GitHub username is “melanie12”, then most likely you’ll end up a portfolio url of melanie12.github.io.
</p>
<p>
I’m going to give you my own customized setup for setting up a portfolio.<span class="intersentencespace"></span> But before I do here is the general recipe if you don’t want to follow my setup and want to try it on your own.
</p>
<div id="uid70" data-tralics-id="uid70" class="subsection" data-number="1.7.1">
<h3>
<a href="#uid70" class="heading hyperref"><span class="number">1.7.1 </span>The General Outline for Setting Up Your Own Portfolio Complete with Custom Domain</a>
</h3>
<div id="uid71" data-tralics-id="uid71" class="subsubsection" data-number="1.7.1.1">
<h4>
<a href="#uid71" class="heading">Step 1 – Pick your our domain name</a>
</h4>
<p class="noindent">
This can be a fun step.<span class="intersentencespace"></span> You can get creative and pick out your own domain.<span class="intersentencespace"></span> If you’re stuck for ideas, I recommend using something close to your name.<span class="intersentencespace"></span> For example, I registered “brucepark.io” as my domain.
</p>
<p>
This is partly because “brucepark.com” was taken but also because I wanted an “io” domain.<span class="intersentencespace"></span> If you’re name is “Bill Smith”, you might find the “.com” is already taken so you might have to get creative.
</p>
</div>
<div id="uid72" data-tralics-id="uid72" class="subsubsection" data-number="1.7.1.2">
<h4>
<a href="#uid72" class="heading">Step 2 – Register the domain name</a>
</h4>
<p class="noindent">
Next, you’ll have to register the domain name.<span class="intersentencespace"></span> Personally, I use <a href="http://bit.ly/2qC5xDD" target="_blank" rel="noopener">Namecheap</a>, but you can use whatever service you feel comfortable with.
</p>
</div>
<div id="uid73" data-tralics-id="uid73" class="subsubsection" data-number="1.7.1.3">
<h4>
<a href="#uid73" class="heading">Step 3 – Pick a host</a>
</h4>
<p class="noindent">
In the past, I’ve used Hostgator.<span class="intersentencespace"></span> I currently use <a href="http://bit.ly/2E6bLgK" target="_blank" rel="noopener">Digital Ocean</a> to host my blog.
</p>
</div>
<div id="uid74" data-tralics-id="uid74" class="subsubsection" data-number="1.7.1.4">
<h4>
<a href="#uid74" class="heading">Step 4 – Create the portfolio</a>
</h4>
<p class="noindent">
If you’re not great at design, pick out a theme.<span class="intersentencespace"></span> I recommend using a Twitter Bootstrap based theme as there are plenty of free mobile friendly themes around that.
</p>
<p>
If you’re a front end developer, it might be better to try and convert a design to HTML/CSS/JavaScript just as an exercise.<span class="intersentencespace"></span> I always argue that if you’re pressed for time, then it’s better to use a well-designed theme that’s already been done for you and let your portfolio projects do the talking for you.
</p>
</div>
<div id="uid75" data-tralics-id="uid75" class="subsubsection" data-number="1.7.1.5">
<h4>
<a href="#uid75" class="heading">Step 5 – Put the portfolio up on your hosting provider</a>
</h4>
<p class="noindent">
Depending on what hosting provider you use, you may have to use an FTP program such as <a href="https://filezilla-project.org/" target="_blank" rel="noopener">FileZilla</a>.<span class="intersentencespace"></span> With GitHub pages, you just push up your html and css pages to GitHub.
</p>
</div>
<div id="uid76" data-tralics-id="uid76" class="subsubsection" data-number="1.7.1.6">
<h4>
<a href="#uid76" class="heading">Summary</a>
</h4>
<p class="noindent">
Now in the next section, I’ll show you my own customized setup.
</p>
</div>
</div>
<p class="noindent">
As a web developer, I’m sure you appreciate the importance of an online portfolio.<span class="intersentencespace"></span> For a long time, I used Hostgator to run my WordPress blog and used that as a double for a portfolio site.
</p>
<p>
But eventually, I started migrating to Digital Ocean and was paying Hostgator to do….nothing.
</p>
<p>
In the interim, Github started allowing developers to host static websites via Github pages.
</p>
<p>
Essentially, Github pages is a free static site hosting service that will let you host your personal, organization or project pages a la a Github repository.
</p>
<div id="uid77" data-tralics-id="uid77" class="subsection" data-number="1.8.1">
<h3>
<a href="#uid77" class="heading hyperref"><span class="number">1.8.1 </span>And who doesn’t love free?</a>
</h3>
<p class="noindent">
That’s why this article will show you how to make your own static site portfolio using a custom domain on GitHub pages.<span class="intersentencespace"></span> But first, I need to tell you about Middleman.
</p>
</div>
<div id="uid78" data-tralics-id="uid78" class="subsection" data-number="1.8.2">
<h3>
<a href="#uid78" class="heading hyperref"><span class="number">1.8.2 </span>Using Middleman to Construct Your Static Site Portfolio</a>
</h3>
<p class="noindent">
As a ruby programmer, one of the best tools I’ve found to roll your own static site is <a href="https://github.com/middleman/middleman" target="_blank" rel="noopener">Middleman</a>.
</p>
<p>
While updating my portfolio as I changed jobs, I realized a WordPress blog was not the best place to post your portfolio.<span class="intersentencespace"></span> After a bit of research, I realized I really wanted a separate static site.
</p>
</div>
<div id="uid79" data-tralics-id="uid79" class="subsection" data-number="1.8.3">
<h3>
<a href="#uid79" class="heading hyperref"><span class="number">1.8.3 </span>Why have a static site?</a>
</h3>
<p class="noindent">
Furthermore, I wanted a place where I could easily update descriptions of projects I had worked on.<span class="intersentencespace"></span> Plus, I wanted a nice layout that I could easily customize.<span class="intersentencespace"></span> Since I’m not a WordPress developer, modifying HTML/CSS markup would be much easier than trying to hunt for and/or customize a WordPress plugin to do it for me.
</p>
<p>
Also, static sites load faster than their dynamic counterparts.
</p>
</div>
<p class="noindent">
Now, since I decided to use HTML markup (especially the Twitter Bootstrap-like markup I was using), it would have been nice to use things from Ruby on Rails like “partials”.
</p>
<p>
For those of you who don’t know what those are, partials are basically templates that cut down on repetitive code in HTML pages.
</p>
<p>
For example, you may have a “menu partial” and that way you update one menu template instead of the same menu template across your portfolio’s site pages.<span class="intersentencespace"></span> Consequently, partials save you quite a bit of time.
</p>
<p>
Middleman gives you those capabilities as well as the option to use popular templating languages such as Haml.<span class="intersentencespace"></span> Personally, I like Haml because it’s easier to read as a coder and it’s easier to write.<span class="intersentencespace"></span> Unlike raw HTML, you don’t have to write opening and closing tags.
</p>
<p>
Also, since Middleman is built in Ruby, it’s easy for me to understand how everything works.
</p>
<p>
Finally, now that you understand the reasons for a static site portfolio, it’s now time to get started constructing one.
</p>
<div id="uid80" data-tralics-id="uid80" class="subsection" data-number="1.9.1">
<h3>
<a href="#uid80" class="heading hyperref"><span class="number">1.9.1 </span>Step 1 – Getting Started With Middleman</a>
</h3>
<p class="noindent">
All you really need to get started is to create a project with a GitHub repository and a Gemfile with Middleman.
</p>
<div id="uid81" data-tralics-id="uid81" class="subsubsection" data-number="1.9.1.1">
<h4>
<a href="#uid81" class="heading">My Middleman Gemfile</a>
</h4>
<p class="noindent">
Below is a copy of my Gemfile.<span class="intersentencespace"></span> I’m going to assume you have some experience with Ruby and environment management tools like <a href="https://github.com/rbenv/rbenv" target="_blank" rel="noopener">rbenv.</a>
</p>
<p>
Depending on when you’re reading this, you might have to upgrade the gem versions.<span class="intersentencespace"></span> You just need the <em>middleman</em> gem, not <em>middleman-livereload</em> or the other gems which I think I used due to wanting live reload capabilities on multiple platforms.
</p>
<div class="code">
<div class="highlight">
<pre># If you do not have OpenSSL installed, update
<div id="uid82" data-tralics-id="uid82" class="subsection" data-number="1.9.2">
<h3>
<a href="#uid82" class="heading hyperref"><span class="number">1.9.2 </span>Step 2 – Configuring Middleman with config.rb</a>
</h3>
<p class="noindent">
Below is a snapshot of how I configure my asset directory paths with middleman (images, CSS, and JavaScript files).<span class="intersentencespace"></span> Yours might look slightly different depending on whether you choose to use Haml or the paths you choose for your asset directories.
</p>
<div class="code">
<div class="highlight">
<pre>set :css_dir, 'stylesheets'
set :js_dir, 'javascripts'
set :images_dir, 'images'
Build-specific configuration
configure :build do
For example, change the Compass output style for deployment
activate :minify_css
Minify Javascript on build
activate :minify_javascript
Enable cache buster
activate :asset_hash
Use relative URLs
activate :relative_assets
Or use a different image path
set :http_prefix, "/Content/images/"
set :haml, { :ugly => true, :format => :html5 }
end
<div id="uid83" data-tralics-id="uid83" class="subsection" data-number="1.9.3">
<h3>
<a href="#uid83" class="heading hyperref"><span class="number">1.9.3 </span>Step 3 – Setting Up Your Directory</a>
</h3>
<p class="noindent">
You will make edits in the source directory.<span class="intersentencespace"></span> Then once you issue a <em>middleman build</em> command, middleman will turn your templating language markup into the raw HTML needed for your static website.
</p>
<p>
To help you get up and running quickly, I’m going to show you the directory structure for my own portfolio site.
</p>
<div id="uid84" data-tralics-id="uid84" class="subsubsection" data-number="1.9.3.1">
<h4>
<a href="#uid84" class="heading">What My Directory Tree Looks Like</a>
</h4>
<p class="noindent">
You’ll notice the directories I specified in config.rb as well as the partial files I have in the <em>layout</em> directory.<span class="intersentencespace"></span> I use the partials for things like the site header and footer.
</p>
<div class="code">
<div class="highlight">
<pre>.
<div id="uid85" data-tralics-id="uid85" class="subsection" data-number="1.9.4">
<h3>
<a href="#uid85" class="heading hyperref"><span class="number">1.9.4 </span>Step 4 – Start coding your site locally</a>
</h3>
<p class="noindent">
Once you have a setup like the one described above, you can begin working on your portfolio locally.<span class="intersentencespace"></span> You are also ready to push the code to your repository.
</p>
<p>
If this is your first time using Middleman, you may find it useful to read up on <a href="https://middlemanapp.com/basics/start_new_site/" target="_blank" rel="noopener">the command to start a new site</a>.<span class="intersentencespace"></span> It’s pretty straightforward if you’re familiar with Ruby.
</p>
</div>
<p class="noindent">
In the paragraphs above, I described the 4 steps I used to roll my own static portfolio site on GitHub.<span class="intersentencespace"></span> Now, I cover how to use <a href="http://bit.ly/2qC5xDD" target="_blank" rel="noopener">Namecheap</a>, GitHub, and the middleman-deploy gem to automatically deploy your site up to GitHub.
</p>
<div id="uid86" data-tralics-id="uid86" class="subsection" data-number="1.10.1">
<h3>
<a href="#uid86" class="heading hyperref"><span class="number">1.10.1 </span>Step 1 – Setting Up Git</a>
</h3>
<p class="noindent">
For your recollection, below is the tree diagram of my current directory setup.<span class="intersentencespace"></span> The easiest thing I found to get started was to setup a Git repository in the build directory and another Git repository in the top level directory.
</p>
<div class="code">
<div class="highlight">
<pre>.
<p>
You could try Git submodules, but I personally was interested in shipping as fast as possible (especially since this was a portfolio site), so I opted for 2 separate repositories.
</p>
<p>
To facilitate this, I have 2 separate Git remotes.<span class="intersentencespace"></span> If you type <em>git remote -v</em> at the command line in my repo, you’ll see something like this:
</p>
<div class="code">
<div class="highlight">
<pre>gh-origin git@github.com:treble37/treble37.github.io.git (fetch)
<div id="uid87" data-tralics-id="uid87" class="subsection" data-number="1.10.2">
<h3>
<a href="#uid87" class="heading hyperref"><span class="number">1.10.2 </span>Step 2 – Setting up middleman-deploy</a>
</h3>
<p class="noindent">
If you’ve been following this tutorial, you should already have middleman in your Gemfile.<span class="intersentencespace"></span> Now we’re going to add middleman-deploy to your Gemfile as below.
</p>
<div class="code">
<div class="highlight">
<pre># If you do not have OpenSSL installed, update
<div id="uid88" data-tralics-id="uid88" class="subsection" data-number="1.10.3">
<h3>
<a href="#uid88" class="heading hyperref"><span class="number">1.10.3 </span>Step 3 – Adjusting your config.rb</a>
</h3>
<p class="noindent">
Now we’re going to add to the config.rb file from the previous steps.<span class="intersentencespace"></span> Add the <em>activate :deploy</em> block per the below config.rb file.<span class="intersentencespace"></span> You will have to adjust the values of <em>deploy.remote</em> and <em>deploy.branch</em> to appropriate values.
</p>
<div class="code">
<div class="highlight">
<pre>set :css_dir, 'stylesheets'
set :js_dir, 'javascripts'
set :images_dir, 'images'
Build-specific configuration
configure :build do
For example, change the Compass output style for deployment
activate :minify_css
Minify Javascript on build
activate :minify_javascript
Enable cache buster
activate :asset_hash
Use relative URLs
activate :relative_assets
Or use a different image path
set :http_prefix, "/Content/images/"
set :haml, { :ugly => true, :format => :html5 }
end
activate :deploy do |deploy|
deploy.deploy_method = :git
Optional Settings
deploy.remote = 'gh-origin' # remote name or git url, default: origin
deploy.branch = 'master' # default: gh-pages
deploy.strategy = :submodule
commit strategy: can be :force_push or :submodule, default: :force_push
deploy.commit_message = 'custom-message'
commit message (can be empty),
# default: Automated commit at `timestamp` by middleman-deploy `version`
end
<p>
It’s likely your deploy.branch value will be master if you setup your GitHub repository to your-github-username.github.io.<span class="intersentencespace"></span> If you created a differently named repository, then the value will be <em>gh-pages</em> per the GitHub documentation.
</p>
</div>
<div id="uid89" data-tralics-id="uid89" class="subsection" data-number="1.10.4">
<h3>
<a href="#uid89" class="heading hyperref"><span class="number">1.10.4 </span>Step 4 – Configuring 2 remotes</a>
</h3>
<p class="noindent">
As I ran the <em>middleman-deploy</em> command, I received a <em>Can’t deploy</em> error.<span class="intersentencespace"></span> Since my <em>deploy.remote</em> value is set to <em>gh-origin</em> in the config.rb file, I have to configure my Git remotes as follows in the build directory:
</p>
<div class="code">
<div class="highlight">
<pre>gh-origin git@github.com:treble37/treble37.github.io.git (fetch)
<p>
The command I used is:
</p>
<p>
<em>git remote set-url gh-orgin git@github.com:treble37/treble37.github.io.git</em>.
</p>
</div>
<div id="uid90" data-tralics-id="uid90" class="subsection" data-number="1.10.5">
<h3>
<a href="#uid90" class="heading hyperref"><span class="number">1.10.5 </span>Step 5 – Use “Namecheap Basic DNS”</a>
</h3>
<p class="noindent">
Since I originally hosted my portfolio site on Hostgator, I also had to change my <a href="http://bit.ly/2qC5xDD" target="_blank" rel="noopener">Namecheap</a> DNS settings.<span class="intersentencespace"></span> I clicked on “Manage” for my brucepark.io domain in the Namecheap interface and set it from “Custom DNS” to “Namecheap Basic DNS”.
</p>
</div>
<div id="uid91" data-tralics-id="uid91" class="subsection" data-number="1.10.6">
<h3>
<a href="#uid91" class="heading hyperref"><span class="number">1.10.6 </span>Step 6 – Setting Up Your Domain on GitHub and Namecheap</a>
</h3>
<p class="noindent">
You also need to do the following:
</p>
<ul>
<li>
Add a CNAME file to your build directory in your repository
</li>
<li>
Create 2 A records and a CNAME record on Namecheap
</li>
<li>
Setup your custom domain on GitHub
</li>
</ul>
<p>
For the first 2 bullet points regarding the CNAME and the A records, you can follow the <a href="https://www.namecheap.com/support/knowledgebase/article.aspx/9645/2208/how-do-i-link-my-domain-to-github-pages" target="_blank" rel="noopener">directions from Namecheap on this page</a>.
</p>
<p>
For setting up your custom domain on GitHub, you navigate to the repository on GitHub of your portfolio, click <em>Settings</em> and add a <em>custom domain</em> under the <em>Custom Domain</em> section.<span class="intersentencespace"></span> You can see how I set it up from the image below.
</p>
</div>
<div id="uid95" data-tralics-id="uid95" class="subsection" data-number="1.10.7">
<h3>
<a href="#uid95" class="heading hyperref"><span class="number">1.10.7 </span>Step 7 – Running middleman deploy command</a>
</h3>
<p class="noindent">
Finally, you can run <em>bundle exec middleman deploy</em> If everything has been setup properly, the portfolio source code in your <em>source</em> directory will be compiled into your <em>build</em> directory and then pushed automatically up to your github directory.
</p>
<p>
You’ll have to push your <em>source</em> directory up to bitbucket (or whatever repository you are using to host your <em>source</em> directory).
</p>
<div id="uid96" data-tralics-id="uid96" class="subsubsection" data-number="1.10.7.1">
<h4>
<a href="#uid96" class="heading">Summary</a>
</h4>
<p class="noindent">
In this article, I talked about using Middleman and your DNS provider to roll your own static site portfolio on GitHub pages.<span class="intersentencespace"></span> To summarize the steps:
</p>
<ul>
<li>
Use Middleman to code your static site
</li>
<li>
Use the middleman-deploy gem to help deploy your static site HTML to GitHub pages
</li>
<li>
Configure your settings properly on both GitHub and your DNS provider
</li>
</ul>
</div>
</div>
<p class="noindent">
One thing I learned from studying marketing was the importance of picking a “niche” to serve.<span class="intersentencespace"></span> A niche in this case is a specialized segment of the market you choose to serve.<span class="intersentencespace"></span> For example, if you’re a grocery store, you might decide to serve consumers interested in high-end organic food.
</p>
<p>
The basic idea behind picking a niche is that it makes it easier to not only market your services and products more effectively, but that you can server your niche better because you are so focused.
</p>
<div id="uid101" data-tralics-id="uid101" class="subsection" data-number="2.1.1">
<h3>
<a href="#uid101" class="heading hyperref"><span class="number">2.1.1 </span>Niche or go broad?</a>
</h3>
<p class="noindent">
Similarly in the tech industry, as of 2017, while there are “full stack” developers, there are also plenty of “front end” or “back end” developers.<span class="intersentencespace"></span> Talking to folks new to coding, I sometimes hear things like “I’m interested in C sharp, Python, JavaScript, Golang, CSS, and Ruby”.
</p>
</div>
<div id="uid102" data-tralics-id="uid102" class="subsection" data-number="2.1.2">
<h3>
<a href="#uid102" class="heading hyperref"><span class="number">2.1.2 </span>The Niches</a>
</h3>
<p class="noindent">
If I look at today’s job advertisements, I see plenty of openings that are specialized such as “front end developer”, “back end developer”, “data engineer”, and “data scientist”.<span class="intersentencespace"></span> And if I delve further into those job descriptions, they usually expect certain specific skills.
</p>
<p>
Even if you had no full-time job, it would still take time to master both the front and back ends.<span class="intersentencespace"></span> For people who are brand new to coding, I recommend picking a niche that you enjoy and then growing from there.<span class="intersentencespace"></span> If you want to brand yourself as “full stack”, then by all means go ahead.
</p>
<p>
But a lot of people just getting into coding have full-time jobs or other daily obligatinos that prevent full time focus.<span class="intersentencespace"></span> If that’s the case, then I would encourage you to pick a niche and then branch out from there.
</p>
</div>
<div id="uid103" data-tralics-id="uid103" class="subsection" data-number="2.1.3">
<h3>
<a href="#uid103" class="heading hyperref"><span class="number">2.1.3 </span>An Easy 2-Step Framework For Choosing What to Focus On</a>
</h3>
<p class="noindent">
So in deciding what to learn to presumably get a coding job, I always encourage people to focus on what they enjoy doing.<span class="intersentencespace"></span> This
</p>
<div id="uid104" data-tralics-id="uid104" class="subsubsection" data-number="2.1.3.1">
<h4>
<a href="#uid104" class="heading">Step 1 – Try something and see if you enjoy it</a>
</h4>
<p class="noindent">
Do you love writing SQL queries?<span class="intersentencespace"></span> Maybe you’d rather specialize in backend development or something close to data engineering.<span class="intersentencespace"></span> On the other hand if you love coding up a design in HTML/CSS and JavaScript, you might be a great candidate for front end development.
</p>
<p>
The point is, you’ll be coding for a while and there will be some late nights and crunch times where you’ll be glad you picked a technology stack you enjoy working in.
</p>
</div>
<div id="uid105" data-tralics-id="uid105" class="subsubsection" data-number="2.1.3.2">
<h4>
<a href="#uid105" class="heading">Step 2 – Look at the job market demand for your chosen skills in your desired location</a>
</h4>
<p class="noindent">
So now that you’ve picked what you want to learn, it’s time to look at the job market.<span class="intersentencespace"></span> It’s quite possible you’ll find a remote job and geography won’t matter.<span class="intersentencespace"></span> But usually most remote jobs ask for senior level developers (as far as I’ve seen).
</p>
<p>
So you’ll want to know what’s available in city or town you want to live in.
</p>
<p>
Here are a few ways to spot check the demand:
</p>
<ol>
<li>
Indeed.com – I like Indeed because lets you search by keyword and location and the results come back with salaries listed (sometimes).<span class="intersentencespace"></span> It’s useful for getting a handy snapshot.<span class="intersentencespace"></span>
</li>
<li>
Craigslist (software/qa/dba/etc) – I like searching the software jobs section on Craigslist.<span class="intersentencespace"></span> I don’t actually apply to any of them there as I’ve found most of them to be of low quality.<span class="intersentencespace"></span> They are either recruiters posting their ads or they are companies in need of low cost help (This is not to say it’s changed now or you can find some gems, but I’ve never found any that were a good fit for me).<span class="intersentencespace"></span> However, it can give you another quick snapshot of what’s available in your area.<span class="intersentencespace"></span>
</li>
<li>
Stackoverflow Jobs – I like typing the keyword of my choice and the location and seeing what pops up.<span class="intersentencespace"></span> It can give you a relative demand of what’s available in your area.<span class="intersentencespace"></span> For example, if I type “ruby” and “Los Angeles”, I get about 6 results pop up.<span class="intersentencespace"></span> If I do it for the United States (instead of just LA), I get 199 results as of June 2017.<span class="intersentencespace"></span> It used to be a lot more before…Hmmm… On the other hand with JavaScript being all the rage right now, if I type “javascript” and “Los Angeles”, I get 28 results.<span class="intersentencespace"></span> It seems there’s quite a bit more demand for JavaScript at the moment.<span class="intersentencespace"></span>
</li>
</ol>
<p>
Usually, between these 3 job portals, I can get an idea of the demand.<span class="intersentencespace"></span> Another great way to gauge demand is to attend a local technology conference centered around your technology stack.<span class="intersentencespace"></span> There will often be a job board and you can see which local companies are hiring.
</p>
</div>
<div id="uid109" data-tralics-id="uid109" class="subsubsection" data-number="2.1.3.3">
<h4>
<a href="#uid109" class="heading">Step 3 – Estimating Salary</a>
</h4>
<p class="noindent">
To get an idea of the salaries in my area, I usually will use 3 of the 4 (or sometimes all 4) of the following online portals:
</p>
<ol>
<li>
Glassdoor.com – I like to type in the technology keyword (e.g., “javascript developer”) and then seeing what the salaries are).<span class="intersentencespace"></span> Sometimes your technology stack might not display salaries.<span class="intersentencespace"></span> In which case, I might resort to typing “software engineer” and just getting a ballpark idea for the locale.<span class="intersentencespace"></span>
</li>
<li>
Payscale.com – This outputs a “what if” report with a salary range showing you where the median is.<span class="intersentencespace"></span>
</li>
<li>
RobertHalf.com – This has a salary calculator with location.<span class="intersentencespace"></span> I’ve noticed the estimates here tend to be a bit higher than the others (so I like to include them).<span class="intersentencespace"></span>
</li>
<li>
Salary.com – This is a site I recently found that has a “compare” feature so you can compare multiple job titles and salaries.<span class="intersentencespace"></span> I usually search for “software engineer”.<span class="intersentencespace"></span> You might want to try “web developer” as well.<span class="intersentencespace"></span>
</li>
</ol>
<p>
I usually make a chart of the low, medium, and high salary numbers and take the averages to get an idea.
</p>
</div>
<div id="uid114" data-tralics-id="uid114" class="subsubsection" data-number="2.1.3.4">
<h4>
<a href="#uid114" class="heading">Time to niche</a>
</h4>
<p class="noindent">
Now that you’ve done all 3 steps, you should have an idea if your choice of niche is economically sustainable as well as personally interesting.
</p>
</div>
</div>
<div id="uid115" data-tralics-id="uid115" class="subsection" data-number="2.2.1">
<h3>
<a href="#uid115" class="heading hyperref"><span class="number">2.2.1 </span>Sample Algorithmic Programming Interview Questions That You Should Ace</a>
</h3>
<p class="noindent">
Note: I compile these and the coded solutions in a separate downloadable bonus
</p>
</div>
<div id="uid116" data-tralics-id="uid116" class="subsection" data-number="2.2.2">
<h3>
<a href="#uid116" class="heading hyperref"><span class="number">2.2.2 </span>A list of front-end questions to study</a>
</h3>
<p class="noindent">
Here are 20 of the best questions I pulled from <a href="https://github.com/h5bp/Front-end-Developer-Interview-Questions" target="_blank" rel="noopener">this list of front end interview questions</a>.
</p>
<ol>
<li>
If you have 5 different stylesheets, how would you best integrate them into the site?<span class="intersentencespace"></span>
</li>
<li>
How many resources will a browser download from a given domain at a time?<span class="intersentencespace"></span> What are the exceptions?<span class="intersentencespace"></span>
</li>
<li>
Name 3 ways to decrease page load (perceived or actual load time).<span class="intersentencespace"></span>
</li>
<li>
What does CORS stand for and what issue does it address?<span class="intersentencespace"></span>
</li>
<li>
What does a doctype do?<span class="intersentencespace"></span>
</li>
<li>
What’s the difference between full standards mode, almost standards mode and quirks mode?<span class="intersentencespace"></span>
</li>
<li>
What’s the difference between HTML and XHTML?
</li>
<li>
What is the difference between classes and IDs in CSS?
</li>
<li>
What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?<span class="intersentencespace"></span>
</li>
<li>
Describe Floats and how they work.<span class="intersentencespace"></span>
</li>
<li>
Explain how a browser determines what elements match a CSS selector.<span class="intersentencespace"></span>
</li>
<li>
Describe pseudo-elements and discuss what they are used for.<span class="intersentencespace"></span>
</li>
<li>
Explain event delegation
</li>
<li>
Explain how this works in JavaScript
</li>
<li>
Explain how prototypal inheritance works
</li>
<li>
Difference between: function Person(){}, var person = Person(), and var person = new Person()?<span class="intersentencespace"></span>
</li>
<li>
What’s the difference between .call and .apply?<span class="intersentencespace"></span>
</li>
<li>
Explain Function.prototype.bind.<span class="intersentencespace"></span>
</li>
<li>
Describe event bubbling.<span class="intersentencespace"></span>
</li>
<li>
Explain the same-origin policy with regards to JavaScript.<span class="intersentencespace"></span>
</li>
<li>
What tools and techniques do you use debugging JavaScript code?<span class="intersentencespace"></span>
</li>
</ol>
</div>
<div id="uid138" data-tralics-id="uid138" class="subsection" data-number="2.2.3">
<h3>
<a href="#uid138" class="heading hyperref"><span class="number">2.2.3 </span>A list of back-end questions to study</a>
</h3>
<p class="noindent">
Here are 50 of the best questions I pulled from <a href="https://github.com/arialdomartini/Back-End-Developer-Interview-Questions" target="_blank" rel="noopener">this list of back end interview questions</a>.
</p>
<ol>
<li>
What is MVC?
</li>
<li>
What is dependency injection?<span class="intersentencespace"></span>
</li>
<li>
What is a real-time system and how is it different from an ordinary system?<span class="intersentencespace"></span>
</li>
<li>
What’s the relationship between real-time languages and heap memory allocation?<span class="intersentencespace"></span>
</li>
<li>
Immutability is the practice of setting values once, at the moment of their creation, and never changing them.<span class="intersentencespace"></span> How immutability can help writing safer code.<span class="intersentencespace"></span>
</li>
<li>
Pro and cons of mutable and immutable values.<span class="intersentencespace"></span>
</li>
<li>
What’s the Object-Relational impedance mismatch?<span class="intersentencespace"></span>
</li>
<li>
Which principles would you apply to define the size of a cache?<span class="intersentencespace"></span>
</li>
<li>
What’s the difference between TCP and HTTP?
</li>
<li>
What are the tradeoffs of client-side rendering vs.<span class="intersentencespace"></span> server-side rendering?<span class="intersentencespace"></span>
</li>
<li>
How could you develop a reliable communication protocol based on a non-reliable one?<span class="intersentencespace"></span>
</li>
<li>
Explain threads to your grandmother
</li>
<li>
Explain streaming and how you would implement it.<span class="intersentencespace"></span>
</li>
<li>
Explain Unicode/Database Transactions to a 5 year old child.<span class="intersentencespace"></span>
</li>
<li>
Suppose the system you are working on does not support transactionality.<span class="intersentencespace"></span> How would you implement it from scratch?<span class="intersentencespace"></span>
</li>
<li>
Which are the limits and pitfalls of Active-Record?<span class="intersentencespace"></span>
</li>
<li>
What are the differences between Active-Record and Data-Mapper?<span class="intersentencespace"></span>
</li>
<li>
What is the intent of the Null Object Pattern?<span class="intersentencespace"></span>
</li>
<li>
Could you write a Thread-Safe Singleton class?<span class="intersentencespace"></span>
</li>
<li>
Why in TDD tests are written before code?<span class="intersentencespace"></span>
</li>
<li>
C++ supports multiple inheritance, and Java allows a class to implement multiple interfaces.<span class="intersentencespace"></span> What impact does using these facilities have on orthogonality?<span class="intersentencespace"></span> Is there a difference in impact between using multiple inheritance and multiple interfaces?<span class="intersentencespace"></span> Is there a difference between using delegation and using inheritance?<span class="intersentencespace"></span> [This question is from The Pragmatic Programmer, by Andrew .Hunt and David Thomas]
</li>
<li>
Why is there a rising interest about Functional Programming?<span class="intersentencespace"></span>
</li>
<li>
What is a closure, and what is useful for?<span class="intersentencespace"></span> What’s in common between closures and classes?<span class="intersentencespace"></span>
</li>
<li>
What are generics useful for?<span class="intersentencespace"></span>
</li>
<li>
Why first-party cookies and third-party cookies are treated so differently?<span class="intersentencespace"></span>
</li>
<li>
What’s ACID (Atomicity, Consistency, Isolation, Durability)?<span class="intersentencespace"></span>
</li>
<li>
How is Lazy Loading achieved?<span class="intersentencespace"></span> When is it useful?<span class="intersentencespace"></span> What are its pitfalls?<span class="intersentencespace"></span>
</li>
<li>
What’s the N+1 problem?<span class="intersentencespace"></span>
</li>
<li>
What is Eventual Consistency?<span class="intersentencespace"></span>
</li>
<li>
About the CAP Theorem, make examples of CP, AP and CA systems.<span class="intersentencespace"></span>
</li>
<li>
How does NoSQL tackle scalability challenges?<span class="intersentencespace"></span>
</li>
<li>
In which case would you use a document database like MongoDB instead of a relational database like MySQL or PostgreSQL?
</li>
<li>
Why do we need Concurrency, anyway?<span class="intersentencespace"></span> Explain.<span class="intersentencespace"></span>
</li>
<li>
Why is testing multithreading / concurrent code so difficult?<span class="intersentencespace"></span>
</li>
<li>
What is a Race Condition?<span class="intersentencespace"></span> Code an example, using whatever language you like.<span class="intersentencespace"></span>
</li>
<li>
What is a Deadlock?<span class="intersentencespace"></span> Explain using code.<span class="intersentencespace"></span>
</li>
<li>
What is Process Starvation?<span class="intersentencespace"></span>
</li>
<li>
What is a Wait Free algorithm?<span class="intersentencespace"></span>
</li>
<li>
How to deal with failures in Distributed Systems?<span class="intersentencespace"></span>
</li>
<li>
Let’s talk about the several approaches to Reconciliation after network partitions
</li>
<li>
What are the Fallacies of Distributed Computing?<span class="intersentencespace"></span>
</li>
<li>
When would you use Request/Reply and when Publish/Subscribe?<span class="intersentencespace"></span>
</li>
<li>
Make a FIFO Queue using only LIFO Stacks.<span class="intersentencespace"></span> Then build a LIFO Stack using only FIFO Queues.<span class="intersentencespace"></span>
</li>
<li>
Write a snippet of code affected by a Stack Overflow
</li>
<li>
Write a tail-recursive version of the factorial function
</li>
<li>
Write a simple Garbage collection system
</li>
<li>
Write a basic message broker, using whatever language you like.<span class="intersentencespace"></span>
</li>
<li>
Write a very basic web server.<span class="intersentencespace"></span> Draw a road map for features to be implemented in the future.<span class="intersentencespace"></span>
</li>
<li>
What is CQRS (Command Query Responsibility Segregation)?<span class="intersentencespace"></span> How is it different from the oldest Command-Query Separation Principle?<span class="intersentencespace"></span>
</li>
<li>
How would you design a software system for scalability?<span class="intersentencespace"></span>
</li>
</ol>
</div>
<div id="sec-coding_challenge" data-tralics-id="uid189" class="subsection" data-number="2.2.4">
<h3>
<a href="#sec-coding_challenge" class="heading hyperref"><span class="number">2.2.4 </span>Coding Challenge Resources</a>
</h3>
<p class="noindent">
Here’s a list of interactive coding challenges that will let you practice.
</p>
<ol>
<li>
<a href="https://www.hackerrank.com/" target="_blank" rel="noopener">HackerRank</a> – This is an interesting site which although I haven’t used I’ve heard good things about.<span class="intersentencespace"></span> You can do problems and if you score well enough, companies use it as a recruiting tool.<span class="intersentencespace"></span>
</li>
<li>
<a href="https://codefights.com/" target="_blank" rel="noopener">Codefights</a> – A site similar to HackerRank which I also haven’t tried yet.<span class="intersentencespace"></span>
</li>
<li>
<a href="https://www.topcoder.com/" target="_blank" rel="noopener">Topcoder</a> – Topcoder is a site I enjoy because of their “match editorials”.<span class="intersentencespace"></span> You can participate in algorithm challeneges and you can get solutions to the problems you don’t understand.<span class="intersentencespace"></span> The only thing is that there are only 4 languages represented: Java, C++, Python, and VB.net.<span class="intersentencespace"></span>
</li>
<li>
<a href="http://codewars.com/" target="_blank" rel="noopener">Codewars</a> – This is somewhat similar to Topcoder but with a larger variety of programming languages.<span class="intersentencespace"></span>
</li>
<li>
<a href="https://projecteuler.net/" target="_blank" rel="noopener">Project Euler</a> – So Project Euler is a fun little site that gives you mathematical programming challenges.<span class="intersentencespace"></span> The challenges get progressively harder.<span class="intersentencespace"></span>
</li>
<li>
<a href="http://exercism.io/" target="_blank" rel="noopener">Exercism.io</a> – Exercism.io challenges are usually “simpler” in that they are not heavily algorithmic, but they are great because other members of the community can comment on how to make your solution better.<span class="intersentencespace"></span> It’s like free code review.<span class="intersentencespace"></span>
</li>
<li>
<a href="https://leetcode.com/" target="_blank" rel="noopener">Leetcode</a> – A programming interview question site.<span class="intersentencespace"></span> I’ve heard good things about it but haven’t tried it.<span class="intersentencespace"></span>
</li>
<li>
<a href="https://www.interviewcake.com/" target="_blank" rel="noopener">Interview Cake</a> – Another programming interview questions site.<span class="intersentencespace"></span> I’ve heard good things about it but haven’t had a chance to try it yet.<span class="intersentencespace"></span>
</li>
</ol>
</div>
<p class="noindent">
These days there’s definitely been some industry pushback against coding bootcamps.<span class="intersentencespace"></span> It’s a very personal decision.<span class="intersentencespace"></span> Some allow you to go part-time and others insist you go full-time.<span class="intersentencespace"></span> Some have a tuition guarantee around finding a job while others expect you to front the cost no matter what.<span class="intersentencespace"></span> Lauren Bradford of Learn To Code With Me posted an <a href="https://learntocodewith.me/posts/students-online-coding-bootcamp/" target="_blank" rel="noopener">interesting article from a bootcamper describing their typical day</a>.
</p>
<ul>
<li>
see the Bonuses in <a href="#cha-bonuses_skills" class="hyperref">Chapter <span class="undefined_ref">cha:bonuses_skills</span></a>
</li>
</ul>
<p class="noindent">
I talk about freelancing as a good way to get started because that’s how I built my portfolio.<span class="intersentencespace"></span> But before we dive deeper into that, let’s discuss some other options for quickly building experience when you don’t have any.
</p>
<ul>
<li>
Help someone else – helping a friend or someone in your network can be a good way to build your portfolio.<span class="intersentencespace"></span>
</li>
<li>
Hackathon – I haven’t personally taken this route, but hackathons can be a fun way to meet other developers and possibly add something to your portfolio.<span class="intersentencespace"></span> I can see it being a fun talking point in your interview if you win a prize at the hackathon or if you built something you’re really proud of.<span class="intersentencespace"></span>
</li>
<li>
Volunteer – If you have an organization you belong to or want to help modernize, volunteering to build an application for them can be a great way to get an item in your portfolio.<span class="intersentencespace"></span>
</li>
<li>
Open source – In my opinion, being able to contribute to an open source project is a great way to show that you have the skills that are ideal for being a working member of a software development team.<span class="intersentencespace"></span> Why?<span class="intersentencespace"></span> It’s because you’ll likely have to have discussions with the developer(s) on the project, you get to showcase your communication skills, you’ll use version control (likely Git), and you’ll have actual working features that you contributed to showcase your skills.<span class="intersentencespace"></span> Of course, this is also one of the most challenging ways a beginner can get started.<span class="intersentencespace"></span>
</li>
<li>
Group project – Group projects can be fun and motivating, but you have to stay focused on coming up with a piece for your portfolio.<span class="intersentencespace"></span> Too often, I’ve been in groups where the focus drifts and people are more interested in chatting than getting anything done.<span class="intersentencespace"></span>
</li>
</ul>
<p class="noindent">
Perhaps you’ve heard of the Catch 22 effect?<span class="intersentencespace"></span> Catch-22 refers to “a paradoxical situation from which an individual cannot escape because of contradictory rules.” (source: <a href="https://en.wikipedia.org/wiki/Catch-22_(logic){:target="_blank"" target="_blank" rel="noopener"></a>Wikipedia
</p>
<p>
For example, no one will give you a job without experience but you can’t get experience without a job.
</p>
<p>
So what is one to do?<span class="intersentencespace"></span> Though I didn’t realize it at the time, freelancing gave me some great experience that I was later able to leverage into a selling point when applying for jobs.
</p>
<div id="uid204" data-tralics-id="uid204" class="subsection" data-number="3.2.1">
<h3>
<a href="#uid204" class="heading hyperref"><span class="number">3.2.1 </span>Where to Find Clients</a>
</h3>
<p class="noindent">
Clients are actually everywhere.<span class="intersentencespace"></span> You just haven’t been looking yet.<span class="intersentencespace"></span> They’re your neighbors, your dentist, your cousin, your friend’s friend who needs a website, or maybe even your local plumber.<span class="intersentencespace"></span> But how do you reach these people?<span class="intersentencespace"></span> Let’s talk about some basic marketing and lead generation.
</p>
<div id="uid205" data-tralics-id="uid205" class="subsubsection" data-number="3.2.1.1">
<h4>
<a href="#uid205" class="heading">What the Panhandler Near the I-5 Freeway Exit Taught Me About Basic Marketing and Lead Generation</a>
</h4>
<p class="noindent">
Living in Los Angeles, I run into more than a few panhandlers.<span class="intersentencespace"></span> When I used to work at a local university and exit the I-5 freeway, there would be one person there with a sign that said something like “homeless and need help”.<span class="intersentencespace"></span> Though at this point in my life, I make targeted donations to charities that I’ve vetted, there was a time I would occasionally donate to panhandlers.
</p>
<p>
And sure enough, other people would stop near the I-5 exit and give the panhandler money for his troubles.
</p><div3 id="uid206" data-tralics-id="uid206" data-number="">The Panhandler is a perfect example of marketing</p>
<p>
In a sense, the panhandler is marketing his services.<span class="intersentencespace"></span> His “product” or “service” that he’s selling is making people feel good about themselves for helping a person down on his luck (in my opinion).
</p><div4 id="uid207" data-tralics-id="uid207" data-number="">And the panhandler should make you feel good about marketing your services</p>
<p>
Because even if you’re new to coding, if a panhandler can get people give him money for essentially free, it shouldn’t be too hard to get paying clients when you’re giving them a tangible service – your coding skills converted into a website or other type of programming labor.
</p></div4> <div4 id="uid208" data-tralics-id="uid208" data-number="">The 2 types of leads: cold and warm</p>
<p>
Now the panhandler is a perfect example of cold lead generation.<span class="intersentencespace"></span> No one who stops near the freeway exit has ever heard of him.<span class="intersentencespace"></span> And when you first start pitching your services, no one may have heard of you.
</p>
<p>
A warm lead is someone who knows you already.<span class="intersentencespace"></span> Perhaps they are a neighbor that you’ve met once at a block party or the local plumber who has fixed your kitchen sink at one point.<span class="intersentencespace"></span> The point is, they have some kind of preexisting relationship with you.
</p>
<p>
As you might suspect, the warmer the lead, the easier it is to sell to them.<span class="intersentencespace"></span> For example, it’s easier for my mom to give me a $1000 loan without a lot of headache since we are blood relatives.<span class="intersentencespace"></span> It would be much harder for my mom to justify giving the panhandler a $1000 loan.
</p></div4> <div4 id="uid209" data-tralics-id="uid209" data-number="">Are you trying to build a business or gain experience?</p>
<p>
When you’re first starting out, it doesn’t matter how you get your leads, just that you get them.<span class="intersentencespace"></span> I’ve heard objections like “well I’ve heard low-paying-bidding-site.com is a race to the bottom.”<span class="intersentencespace"></span> When I ask, “but are you trying to build a business or just get some experience in your portfolio?”
</p>
<p>
If the answer is you’re just trying to get some experience, then sites like Upwork or Freelancer will do just fine.You’re not trying to build a premium digital web agency, you’re trying to get experience to land a job.<span class="intersentencespace"></span> Those are 2 completely different goals and should be treated as such.
</p></div4> <div4 id="uid210" data-tralics-id="uid210" data-number="">Sources for cold leads</p>
<p>
So now that you’re clear that your goal is to get experience, here’s a list of 5 places where you can land some cold leads.
</p>
<ol>
<li>
<a href="https://www.upwork.com/" target="_blank" rel="noopener">Upwork</a>(formerly Elance and ODesk)
</li>
<li>
<a href="https://www.freelancer.com/" target="_blank" rel="noopener">Freelancer</a>
</li>
<li>
<a href="https://www.reddit.com/r/javascript/" target="_blank" rel="noopener">Reddit</a>
</li>
<li>
<a href="https://losangeles.craigslist.org/" target="_blank" rel="noopener">Craigslist</a>
</li>
<li>
<a href="https://www.toptal.com/" target="_blank" rel="noopener">Toptal</a>
</li>
<li>
<a href="https://www.quora.com/What-are-the-best-freelancing-sites" target="_blank" rel="noopener">See this quora post for even more sites</a>
</li>
</ol>
<p>
You might be wondering things like “but how long does it take” to get a client or “how many pitches should I send”?<span class="intersentencespace"></span> Like any consultant, I will tell you “it depends.”
</p>
<p>
It depends on what the potential client is looking for, how well your skillset matches up, and how well you communicate your pitch.<span class="intersentencespace"></span> If this type of marketing is new to you, you’ll have to do it a few times to get comfortable with what works for you.
</p>
<p>
The one thing I would suggest is to track your numbers.<span class="intersentencespace"></span> Keep track of how many leads you send out, on what platform, how many deals you land, and the profitability of them.<span class="intersentencespace"></span> This way after a while, you’ll be able to see which platform is the best for you to invest your time in.
</p></div4> <div4 id="uid217" data-tralics-id="uid217" data-number="">Sources for warm leads</p>
<p>
Your sources for warm leads will vary.<span class="intersentencespace"></span> In speaking to new coders trying this process, some have a buddy who hooked them up with someone who needed a brochure website.<span class="intersentencespace"></span> Another fellow I know used Reddit.<span class="intersentencespace"></span> Your mileage may vary depending on how you tap your network.
</p></div4> <div4 id="uid218" data-tralics-id="uid218" data-number="">Where I Got My First Clients</p>
<p>
When I moved to California, I got my start by bidding on Elance.com (now Upwork.com).<span class="intersentencespace"></span> I even found local clients on there.<span class="intersentencespace"></span> I also got some by cold-calling.<span class="intersentencespace"></span> I really didn’t know anyone in California, so it was necessary to start this way.
</p>
<p>
As I really hate cold-calling, I even experimented with hiring folks from oDesk to do it for me.<span class="intersentencespace"></span> I never quite made this work.<span class="intersentencespace"></span> The point is you can land clients through pretty much any technique, you just have to work it.
</p>
<p>
One client engagement went so well, they offered to make me a partner in the business, but for various reasons I decided not to do it.
</p></div4> <div4 id="uid219" data-tralics-id="uid219" data-number="">Long Term Marketing: Blogging and Open Source</p>
<p>
When I started freelancing, I also put up a brochure site using WordPress.<span class="intersentencespace"></span> Then I wrote a few articles for it that I thought were relevant to business owners wanting websites.<span class="intersentencespace"></span> That was in 2013 or 2014.<span class="intersentencespace"></span> This year in 2017, I got a message through that site asking about a potential website redesign.
</p>
<p>
The point is, having your own site up (and with at least a few articles) is a good way to land potential clients.
</p>
<p>
One thing I have always wanted to do (but never have) is use open source as a marketing tool.<span class="intersentencespace"></span> The famous Ruby on Rails consultancy Thoughtbot does this and I’ve heard good things about it from other freelancers.
</p></div4> <div4 id="uid220" data-tralics-id="uid220" data-number="">Online Advertising</p>
<p>
You could also try online advertising through a medium like Facebook or Google ads.<span class="intersentencespace"></span> I’ve used Facebook ads to advertise a service I was giving away (mentoring to new coders).<span class="intersentencespace"></span> But there’s no reason why you couldn’t do it with a paid service such as website implementation.
</p></div4></div3>
</div>
</div>
<div id="uid221" data-tralics-id="uid221" class="subsection" data-number="3.2.2">
<h3>
<a href="#uid221" class="heading hyperref"><span class="number">3.2.2 </span>How to Charge</a>
</h3>
<p class="noindent">
The two popular ways to charge people for software labor are fixed bids or hourly billing.<span class="intersentencespace"></span> Before we talk about which might be better, let’s talk about risk.
</p>
<div id="uid222" data-tralics-id="uid222" class="subsubsection" data-number="3.2.2.1">
<h4>
<a href="#uid222" class="heading">Managing Risk</a>
</h4>
<p class="noindent">
If you’re building a consumer facing application (let’s say it’s a Twitter clone just for the sake of example) but you’ve never built it before, you probably won’t have an idea of how long it takes.
</p>
<p>
So if you charge a fixed price (say $2000) assuming it will take you 40 hours, you’re effectively billing at a $50 per hour rate.<span class="intersentencespace"></span> If it takes you any longer than 40 hours (say 60), you’re effectively giving the customer a discount (though they would never know it unless you tell them).<span class="intersentencespace"></span> In this case the risk is on you to manage the scope.
</p>
<p>
I think this can feel somewhat daunting if you are new to programming as you are just learning the ropes.
</p>
<p>
Now let’s put the shoe on the other foot and say you charge by the hour.<span class="intersentencespace"></span> Now you’re effectively putting the financial risk on the client.<span class="intersentencespace"></span> If you underestimate the amount of time that something takes, then the client will end up paying more.
</p>
<p>
I’m sure you can see that this might not lead to a happy client if you grossly underestimate the costs.<span class="intersentencespace"></span> So to keep the client happy, you may end up discounting your rate.
</p>
</div>
<div id="uid223" data-tralics-id="uid223" class="subsubsection" data-number="3.2.2.2">
<h4>
<a href="#uid223" class="heading">A Word On Value-Based Pricing</a>
</h4>
<p class="noindent">
So what is the best way – fixed or hourly?<span class="intersentencespace"></span> We’ll come back to that.<span class="intersentencespace"></span> First, let’s talk about a concept I’ve heard in the marketing world called value-based pricing.<span class="intersentencespace"></span> The idea is that you charge a fraction of the value your service or product is going to provide the business.
</p>
<p>
So let’s say you’re building a software product that will net the client $2 million in revenue in 3 months.<span class="intersentencespace"></span> A value-based pricing scheme might involve charging $400,000 for developing that product (20% of the $2 million).<span class="intersentencespace"></span> These are random numbers but you get the idea.
</p>
<p>
“But wait a minute”, you say.<span class="intersentencespace"></span> “Isn’t this just a high end fixed price”?<span class="intersentencespace"></span> And yes it is in a way.<span class="intersentencespace"></span> But the idea is that you are charging based on the value your product or service is providing.<span class="intersentencespace"></span> So it’s a win for everyone.<span class="intersentencespace"></span> It’s a win for the client because they will get tremendous value out of your product or service.<span class="intersentencespace"></span> And it’s a win for you because you’ll make a handsome profit.
</p>
</div>
<div id="uid224" data-tralics-id="uid224" class="subsubsection" data-number="3.2.2.3">
<h4>
<a href="#uid224" class="heading">But what should you do as a newbie?</a>
</h4>
<p class="noindent">
I would actually encourage you to experiment.<span class="intersentencespace"></span> Try billing hourly.<span class="intersentencespace"></span> Try billing fixed price.<span class="intersentencespace"></span> Focus on delivering value to your clients.<span class="intersentencespace"></span> This is the best way to be successful as a freelancer in the long run.
</p>
<p>
Now, I will say that billing at a fixed price takes some risk out of it for the client and might be an easier sale to make for that reason.<span class="intersentencespace"></span> But if you’re doing it to build a portfolio (rather than a business), than optimizing for experience rather than price makes more sense.
</p>
</div>
</div>
<div id="uid225" data-tralics-id="uid225" class="subsection" data-number="3.2.3">
<h3>
<a href="#uid225" class="heading hyperref"><span class="number">3.2.3 </span>Handy Freelancing Tools</a>
</h3>
<p class="noindent">
Of course, part of being a freelancer is staying organized with respect to project management, billing and time tracking.
</p>
<div id="uid226" data-tralics-id="uid226" class="subsubsection" data-number="3.2.3.1">
<h4>
<a href="#uid226" class="heading">Billing and Time Tracking Tools</a>
</h4>
<p class="noindent">
When I started, I tried different tools.<span class="intersentencespace"></span> But the one that worked the best for me was <a href="http://bit.ly/2CVUR5n" target="_blank" rel="noopener">Freshbooks</a>.
</p>
<p>
The interface is simple and easy to use to track time (it’s also web-based so you can access it from anywhere).<span class="intersentencespace"></span> You can setup multiple projects, multiple clients, and multiple “tasks” for each project.<span class="intersentencespace"></span> And then you can generate a nice report so you can see where you’ve been spending your time.
</p>
<p>
I’ve also used desktop time tracking tools such as <a href="http://www.officetime.net/" target="_blank" rel="noopener">Office Time</a>, but overall, I found <a href="http://bit.ly/2CVUR5n" target="_blank" rel="noopener">Freshbooks perfect for my needs</a>.
</p>
</div>
<div id="uid227" data-tralics-id="uid227" class="subsubsection" data-number="3.2.3.2">
<h4>
<a href="#uid227" class="heading">Project Management – Basecamp, Trello, Pivotal</a>
</h4>
<p class="noindent">
The other important part about freelancing is to stay on top of your project tasks and communicating with the client.<span class="intersentencespace"></span> Basecamp is a great project management tool.<span class="intersentencespace"></span> You can have users login and leave comments and feedback.<span class="intersentencespace"></span> I like having an “all-in-one” portal to manage client communication.<span class="intersentencespace"></span> As I learned the hard way, this beats having to manage all communication in email.
</p>
<p>
Trello can work too as you can invite members to specific “boards” where you can projects.
</p>
<p>
One place I freelance contracted for used Pivotal Tracker.<span class="intersentencespace"></span> That was by far my favorite way to manage software projects.<span class="intersentencespace"></span> You could write “story tasks” and assign them “velocity” points.<span class="intersentencespace"></span> It was great for a software team.<span class="intersentencespace"></span> If you’re a solo freelancer, you might want to get started with Trello or Basecamp (if you can afford it).
</p>
</div>
<div id="uid228" data-tralics-id="uid228" class="subsubsection" data-number="3.2.3.3">
<h4>
<a href="#uid228" class="heading">Email & Communication</a>
</h4>
<p class="noindent">
One thing I noticed about clients is that they get anxious about the state of their software project.<span class="intersentencespace"></span> You should manage communication expectations ahead of time.
</p>
<p>
Now you don’t want them calling you every 5 minutes.<span class="intersentencespace"></span> So promise a regular update.<span class="intersentencespace"></span> I suggest trying something like a 15 minute daily update call of the 3 most important features or tasks you delivered for them that day.<span class="intersentencespace"></span> Or I suggest a daily email update.<span class="intersentencespace"></span> Ask your client what their preference is.<span class="intersentencespace"></span> Some clients need more communication to “feel secure” while others need less.
</p>
<p>
Less is ideal for you as then you will have more time to work.
</p>
</div>
<div id="uid229" data-tralics-id="uid229" class="subsubsection" data-number="3.2.3.4">
<h4>
<a href="#uid229" class="heading">Contracts</a>
</h4>
<p class="noindent">
When you’re starting out, it’s good to get in the practice of capturing things down in writing.<span class="intersentencespace"></span> Having a contract and/or scope of work prevents the client from going back and saying “I don’t remember that.”
</p>
<p>
There’s nothing like having a signed document to cover your bases.<span class="intersentencespace"></span> Here’s a <a href="https://github.com/ashedryden/freelance-contract" target="_blank" rel="noopener">free contract template</a>.<span class="intersentencespace"></span> Ideally, if you’re communicating well with the client and are providing regular updates, there should be no surprises or misunderstandings.
</p>
</div>
<div id="uid230" data-tralics-id="uid230" class="subsubsection" data-number="3.2.3.5">
<h4>
<a href="#uid230" class="heading">Collecting the Money</a>
</h4>
<p class="noindent">
Ah, invoicing.<span class="intersentencespace"></span> I was a bit nerve-wracked about collecting money when I first started out.<span class="intersentencespace"></span> I would send out an invoice for the hours I worked.<span class="intersentencespace"></span> Fortunately, I never had a bad experience with clients paying.<span class="intersentencespace"></span> I always got paid for the hours I worked.
</p>
<p>
On a side note, this is another reason I liked <a href="http://bit.ly/2CVUR5n" target="_blank" rel="noopener">Freshbooks</a>.<span class="intersentencespace"></span> It let you see when the clients saw the invoice but didn’t pay.<span class="intersentencespace"></span> Sometimes it would take clients a few days, but they eventually paid.
</p>
</div>
<div id="uid231" data-tralics-id="uid231" class="subsubsection" data-number="3.2.3.6">
<h4>
<a href="#uid231" class="heading">Summary</a>
</h4>
<p class="noindent">
So by now, hopefully you have a good idea of how to start freelancing.
</p>
</div>
<div id="uid232" data-tralics-id="uid232" class="subsubsection" data-number="3.2.3.7">
<h4>
<a href="#uid232" class="heading">Epic Resources</a>
</h4>
<ul>
<li>
see the Bonuses in <a href="#cha-bonuses_experience" class="hyperref">Chapter <span class="undefined_ref">cha:bonuses_experience</span></a>
</li>
</ul>
</div>
</div>
<p class="noindent">
When you’re first starting out in the technology industry, you may not know anyone who can give you leads to a job.<span class="intersentencespace"></span> If you have zero or close to zero experience under your belt, it will likely be harder to get companies to take a look at your resume.
</p>
<p>
This is part of why I encourage you to develop a strong portfolio.<span class="intersentencespace"></span> It gives you a way to stand out from other candidates who haven’t done the work.
</p>
<p class="noindent">
Recently, I’ve been somewhat obsessed about how likeability can influence your economic opportunities in life.<span class="intersentencespace"></span> One choice quote I read came from a book called <a href="https://www.amazon.com/gp/product/0062416049/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0062416049&linkCode=as2&tag=bwpark-20&linkId=9c70d8281b08a73e06a65003f4815b44" target="_blank" rel="noopener">Barking Up the Wrong Tree</a><span rend="inline" file="//ir-na.amazon-adsystem.com/e/ir?t=bwpark-20l=am2o=1a=0062416049"></span> which stated:
</p>
<blockquote class="quotation">
<p class="quote">
According to Stanford Graduate School of Business professor Jeffrey Pfeffer, managing what your boss thinks of you is far more important than actual hard work.<span class="intersentencespace"></span> A study shows that those who made a good impression got better performance reviews than those who worked harder but didn’t manage impressions as well.<span class="intersentencespace"></span> Often this comes down to something we’re all very familiar with: good ol’ ass kissing.<span class="intersentencespace"></span> Is flattering the boss effective?<span class="intersentencespace"></span> Research has shown flattery is so powerful that it works even when the boss knows it’s insincere.<span class="intersentencespace"></span> Jennifer Chatman, a professor at the University of California at Berkeley, did a study to see at what point flattery backfired .<span class="intersentencespace"></span> . .<span class="intersentencespace"></span> but she couldn’t find one.<span class="intersentencespace"></span>
</p>
</blockquote>
<p>
Now, I am in no way suggesting that you should not be great at your job or that you shouldn’t work hard, I’m sharing this research as a way to illustrate there are other factors that go into finding a job (as well as keeping one).
</p>
<div id="uid234" data-tralics-id="uid234" class="subsection" data-number="4.1.1">
<h3>
<a href="#uid234" class="heading hyperref"><span class="number">4.1.1 </span>Attending local tech meetups in your niche</a>
</h3>
<p class="noindent">
Attending local meetups in technology you’re interested in can be a great way to network and meet new people.<span class="intersentencespace"></span> I’ve met people I was going to be working (without realizing it) by attending meetups and community events.<span class="intersentencespace"></span> Plus, it can just be fun to get out and meet fellow geeks.
</p>
</div>
<div id="uid235" data-tralics-id="uid235" class="subsection" data-number="4.1.2">
<h3>
<a href="#uid235" class="heading hyperref"><span class="number">4.1.2 </span>The story of how an average developer got a job through networking</a>
</h3>
<p class="noindent">
In fact, someone (let’s call him Jim) I knew got his programming job by attending a local programming meetup.<span class="intersentencespace"></span> This particular programmer had applied cold to Company X by sending in his resume and was rejected.<span class="intersentencespace"></span> He kept attending the meetup and a year later, he got a job at Company X. How do I know this?
</p>
<p>
My friend who works at the company with Jim noted that Jim appeared to be good friends with the boss.<span class="intersentencespace"></span> My friend also noted that although Jim was by no means the greatest programmer, he was good at getting people to like him.
</p>
<p>
This is the power of the hallway track.
</p>
</div>
<div id="uid236" data-tralics-id="uid236" class="subsection" data-number="4.1.3">
<h3>
<a href="#uid236" class="heading hyperref"><span class="number">4.1.3 </span>Community</a>
</h3>
<p class="noindent">
One of the things that first puzzled me about the technology scene was the abundance of meetups.<span class="intersentencespace"></span> I used to wonder why people weren’t content with just a keyboard and their terminal.<span class="intersentencespace"></span> After all, most programming occurs when you sit and type alone at your keyboard (unless you’re in a pair programming shop).
</p>
<p>
One day while attending a Ruby study group, I noticed one of the attendees thank the leader of the study group for helping him out with an answer to an issue he was facing at work.<span class="intersentencespace"></span> It was a huge time saver for him.<span class="intersentencespace"></span> Plus, I also noticed I was learning interesting things at this study group.
</p>
<p>
In fact to this day, I’m still in touch with a few of those folks from the study group and I’m really glad about that.<span class="intersentencespace"></span> In fact, blogger John Sonmez <a href="https://simpleprogrammer.com/2014/03/21/importance-community-cant-alone/" target="_blank" rel="noopener">posted this nice article</a> about community and its benefits.
</p>
<p>
Saron Yitbarek was a self-taught coding newbie who appropriately started a website called <a href="https://www.codenewbie.org/" target="_blank" rel="noopener">Code Newbie</a> with podcasts and a forum for new programmers.<span class="intersentencespace"></span> The forum is a nice and friendly place for coding newbies.
</p>
</div>
<div id="uid237" data-tralics-id="uid237" class="subsection" data-number="4.2.1">
<h3>
<a href="#uid237" class="heading hyperref"><span class="number">4.2.1 </span>The power of lightning talks</a>
</h3>
<p class="noindent">
A lightning talk is simply a brief (15-30 minutes) technical talk about a particular technical topic.<span class="intersentencespace"></span> One thing I noticed is that when a lightning talk is well-received, the speaker gets a lot of questions.<span class="intersentencespace"></span> People also tend to gravitate to talk with the speakers.
</p>
<p>
Why?<span class="intersentencespace"></span> I believe it works on a couple of levels.<span class="intersentencespace"></span> First, it’s less intimidating to make small talk with a speaker.<span class="intersentencespace"></span> They usually offer to answer questions and they’ve also shown willingness to put themselves out there.<span class="intersentencespace"></span> Secondly, people genuinely have questions for the speaker.
</p>
<p>
Also, I’ve noticed that a lot (not all) of the speakers tend to be senior level engineers.<span class="intersentencespace"></span> And since it’s usually senior level engineers that are involved in interviews, you may end up inadvertently getting to know someone who will interview you.
</p>
</div>
<div id="uid238" data-tralics-id="uid238" class="subsection" data-number="4.2.2">
<h3>
<a href="#uid238" class="heading hyperref"><span class="number">4.2.2 </span>How to Give a Good 10 Minute Lightning Talk</a>
</h3>
<p class="noindent">
Recently, I gave a 10 minute lightning talk on moving from Elixir to Ruby.<span class="intersentencespace"></span> You can find a <a href="https://speakerdeck.com/treble37/making-the-jump-elixir-for-rubyists" target="_blank" rel="noopener">link to a copy of the slides on SpeakerDeck</a>.
</p>
<p>
It was my first lightning talk ever and it was in a new meetup group I recently joined.<span class="intersentencespace"></span> Naturally, I was a bit nervous.<span class="intersentencespace"></span> So if you’ve ever been curious about giving a lightning talk at your local technology meetup, here’s a write up of my experience and the process I followed.
</p>
<div id="uid239" data-tralics-id="uid239" class="subsubsection" data-number="4.2.2.1">
<h4>
<a href="#uid239" class="heading">Step 1 – Come up with the idea</a>
</h4>
<p class="noindent">
Since this was my first talk and I didn’t know that much about Elixir, I decided to try and do a talk aimed at people new to the language.<span class="intersentencespace"></span> I wanted to share some of the experiences I had working through the language.
</p>
<p>
I thought about doing something purely on the syntax of Elixir.<span class="intersentencespace"></span> But I didn’t think a talk called “Elixir Syntax” would be that interesting.<span class="intersentencespace"></span> Also, I didn’t want the talk to be a rehash of what people could find in the documentation.
</p>
<p>
So I tried to find a “spin” on the topic…
</p>
</div>
<div id="uid240" data-tralics-id="uid240" class="subsubsection" data-number="4.2.2.2">
<h4>
<a href="#uid240" class="heading">Step 2 – Put a “spin” on the idea that makes it unique</a>
</h4>
<p class="noindent">
Since my primary programming language was Ruby, I decided to talk about my own experience of trying to learn Elixir coming from Ruby.
</p>
<p>
This added the <em>niche</em> factor that I thought would help make it a bit more interesting to folks.<span class="intersentencespace"></span> It also didn’t hurt that I had written a <a href="http://www.binarywebpark.com/elixir-basics-getting-speed-rubyist/" target="_blank" rel="noopener">blog post about Elixir basics for a Rubyist</a>.
</p>
<p>
Since I was working full-time, I thought this would help cut down on the preparation time.
</p>
</div>
<div id="uid241" data-tralics-id="uid241" class="subsubsection" data-number="4.2.2.3">
<h4>
<a href="#uid241" class="heading">Step 3 – Slide preparation</a>
</h4>
<p class="noindent">
For preparing the slides, I decided to use the <a href="https://github.com/hakimel/reveal.js/" target="_blank" rel="noopener">Reveal.JS presentation framework</a>.
</p>
<p>
It’s a pretty popular open source project and I knew there was probably already a fair amount of tutorials and templates I could use in case I ran into issues or needed a nice styleized template.
</p>
<p>
For images, it takes time to find them and format them.<span class="intersentencespace"></span> Two free services I like are <a href="https://unsplash.com/" target="_blank" rel="noopener">unsplash</a> for still photos and <a href="http://giphy.com/" target="_blank" rel="noopener">giphy</a> for animated ones.
</p>
<p>
When I can’t find anything on either of those, I like to use <a href="http://bit.ly/2kzhkvv" target="_blank" rel="noopener">Photodune</a> for more professional images.<span class="intersentencespace"></span> It’s saved me a lot of time to be able to just type “programming” in the search box and get back a list of related images.
</p>
</div>
<div id="uid242" data-tralics-id="uid242" class="subsubsection" data-number="4.2.2.4">
<h4>
<a href="#uid242" class="heading">Step 4 – Talk Preparation</a>
</h4>
<p class="noindent">
Having been a part of the Toastmaster organization at one point, I’ve had to give prepared talks and so I know it can take more time than you think it will.
</p>
<p>
I also searched Google and found tips such as “delivery is more important than content from the <a href="https://www.software.ac.uk/home/cw11/giving-good-lightning-talk" target="_blank" rel="noopener">Software Sustainability Institute website</a>.<span class="intersentencespace"></span> That’s something I also learned from Toastmasters.
</p>
<p>
The next thing I did was rehearse the presentation after work a few times.<span class="intersentencespace"></span> This was important for a couple of reasons.
</p>
<p>
The first is timing.<span class="intersentencespace"></span> I time the talk to see if it’s approximately 10 to 12 minutes.<span class="intersentencespace"></span> Fortunately, it was within that time range.
</p>
<p>
The second thing is slide flow.<span class="intersentencespace"></span> What do I mean by slide flow?
</p>
<p>
Slide flow is how it looks to the audience.<span class="intersentencespace"></span> How do the bullets animate and pop into the screen?<span class="intersentencespace"></span> How do the images look adjacent to the text?<span class="intersentencespace"></span> Do I have too many bullet points on one slide?
</p>
</div>
<div id="uid243" data-tralics-id="uid243" class="subsubsection" data-number="4.2.2.5">
<h4>
<a href="#uid243" class="heading">What I Would Do Differently</a>
</h4>
<p class="noindent">
So those are the 4 steps I used to prepare my first lightning talk.<span class="intersentencespace"></span> If I were to do things differently, I might try doing the following.
</p><div3 id="uid244" data-tralics-id="uid244" data-number="">Lesson 1 – Try to pick a more technical topic that uses more Erlang type topics</p>
<p>
I like to use talks as a vehicle for my own learning.<span class="intersentencespace"></span> Going forward, I would like to tackle more technical topics.<span class="intersentencespace"></span> For instance, I might give a talk that talks or uses a bit more Erlang concepts.
</p></div3> <div3 id="uid245" data-tralics-id="uid245" data-number="">Lesson 2 – Try to have more highs and lows (“drama”)</p>
<p>
The other thing I might do differently is to have more <em>highs</em> and <em>lows</em> in the talk.<span class="intersentencespace"></span> This would help create more “drama” within the flow of the talk.<span class="intersentencespace"></span> I’d like to think this would help keep the audience more interested so I don’t end up droning on and on.
</p></div3> <div3 id="uid246" data-tralics-id="uid246" data-number="">Lesson 3 – Not go as fast and break down the content more</p>
<p>
A couple of people said they found the talk a bit too fast-paced.<span class="intersentencespace"></span> I can believe this as I have a tendency to talk fast when I get nervous.<span class="intersentencespace"></span> I also thought the content was basic enough that I was worried people would get bored if I stayed too long on one slide.
</p>
<p>
But since I targeted the talk to newer folks, it actually makes sense that they wanted me to slow down and spend more time on topics.
</p></div3> <div3 id="uid247" data-tralics-id="uid247" data-number="">Summary</p>
<p>
Giving a lightning talk comes down to preparation and audience engagement.<span class="intersentencespace"></span> I look forward to trying a few more and reporting on the results of the experiment.
</p></div3>
</div>
</div>
<div id="uid248" data-tralics-id="uid248" class="subsection" data-number="4.2.3">
<h3>
<a href="#uid248" class="heading hyperref"><span class="number">4.2.3 </span>Some Do’s and Dont’s of Networking at Technology Events</a>
</h3>
<p class="noindent">
So I think there are plenty of books that cover networking in depth, but I think there are a few specific things that are helpful when it comes to networking in technology.
</p>
<div id="uid249" data-tralics-id="uid249" class="subsubsection" data-number="4.2.3.1">
<h4>
<a href="#uid249" class="heading">Tip 1: Start with a Warm and Helpful Mindset</a>
</h4>
<p class="noindent">
The best thing you can do when networking is to be genuinely warm and helpful if possible.<span class="intersentencespace"></span> So if someone needs help setting up chairs at a meetup, offer to see if you can help.
</p>
<p>
You don’t have to have the charisma of a politician running for office, but again, coming across as warm and helpful is a really good way to stand out.<span class="intersentencespace"></span> After all, nobody wants to work with someone who is unlikeable.
</p>
</div>
<div id="uid250" data-tralics-id="uid250" class="subsubsection" data-number="4.2.3.2">
<h4>
<a href="#uid250" class="heading">Tip 2: Building the Relationship: It’s All About Them, Not You</a>
</h4>
<p class="noindent">
Just try to have regular conversations with people and be yourself.<span class="intersentencespace"></span> Don’t hit people up for jobs right off the bat.<span class="intersentencespace"></span> It’s better if you can find a way to segue there naturally.<span class="intersentencespace"></span> In fact, right now the demand for technical positions (at least for senior positions) is so high, that if you show yourself to be capable of learning quickly AND are likeable, you can pretty much write your own ticket, especially after you get that first year or two of experience.
</p>
</div>
<div id="uid251" data-tralics-id="uid251" class="subsubsection" data-number="4.2.3.3">
<h4>
<a href="#uid251" class="heading">Tip 3: Be interested</a>
</h4>
<p class="noindent">
Try to attend meetups with technology stacks that you are actually interested in working in.<span class="intersentencespace"></span> It will help you ask enthusiastic questions more naturally and you will have an easier time finding common ground with others, the basis for any long term relationship.
</p>
</div>
<div id="uid252" data-tralics-id="uid252" class="subsubsection" data-number="4.2.3.4">
<h4>
<a href="#uid252" class="heading">Tip 4: Play the long game</a>
</h4>
<p class="noindent">
After a while, you might start to notice the same faces attending a particular meetup or event.<span class="intersentencespace"></span> This is what people mean when they say the “tech community is small”.<span class="intersentencespace"></span> This is why I encourage people to try and give lightning talks and/or start writing a blog.
</p>
</div>
<div id="uid253" data-tralics-id="uid253" class="subsubsection" data-number="4.2.3.5">
<h4>
<a href="#uid253" class="heading">Tip 5: Meet as many people as you can</a>
</h4>
<p class="noindent">
While you’re bonding with people and forming connections, try to meet as many people as you can.<span class="intersentencespace"></span> As it turns out, more people <a href="https://research.fb.com/how-strong-and-weak-ties-help-you-find-a-job/" target="_blank" rel="noopener">find jobs through “weak ties” than close friends</a>.
</p>
</div>
</div>
<div id="uid254" data-tralics-id="uid254" class="subsection" data-number="4.3.1">
<h3>
<a href="#uid254" class="heading hyperref"><span class="number">4.3.1 </span>Online networking</a>
</h3>
<ul>
<li>
Forums – I’ve also had success getting job interviews via online communities.<span class="intersentencespace"></span> For example, I was once part of an active online Ruby forum that had job postings.<span class="intersentencespace"></span>
</li>
<li>
Open source – Similarly, if you start a popular open source project, that could also lead to new opportunities.<span class="intersentencespace"></span>
</li>
<li>
Blog – A popular blog could also lead to new opportunities.<span class="intersentencespace"></span> I’ve heard John Sonmez of <a href="https://simpleprogrammer.com/" target="_blank" rel="noopener">Simple Programmer</a> talk about how his blog led to $300 per hour consulting gigs.<span class="intersentencespace"></span>
</li>
<li>
Podcasting – If you start a podcast, that could also be another great way to network with others.<span class="intersentencespace"></span> Charles Maxwood of the Ruby Rogues podcast is famous in this space for that reason.<span class="intersentencespace"></span>
</li>
</ul>
</div>
<div id="uid259" data-tralics-id="uid259" class="subsection" data-number="4.3.2">
<h3>
<a href="#uid259" class="heading hyperref"><span class="number">4.3.2 </span>Offline networking</a>
</h3>
<ul>
<li>
Hackathons – This is one thing I have yet to try, but I would think a public hackathon could be a great way to meet other coders.<span class="intersentencespace"></span>
</li>
<li>
Study groups – I’ve attended study groups (and started them) and found they’re a great way to get to know others in the community.<span class="intersentencespace"></span>
</li>
<li>
Meetups – This is another great way to start connecting with familiar faces.<span class="intersentencespace"></span> By attending a specific programming language meetup regularly, I’ve been able to meet others this way.<span class="intersentencespace"></span>
</li>
<li>
Technology Conferences – I love conferences because not only do they always have healthy job boards, but you can also speak to people about what it’s like to work at that company.<span class="intersentencespace"></span>
</li>
</ul>
</div>
<p class="noindent">
I remember when I was first breaking into the technology industry, after my first job, I started cold applying to different companies.<span class="intersentencespace"></span> Sometimes it was through recruiters, and other times I did it myself.<span class="intersentencespace"></span> For the job search I did after my first job after working at a local university, I sent out roughly <span class="inline_math">\( \sim \)</span>60-70 applications before I received an offer from my first startup job.
</p>
<p>
The next job hunt I did after that I sent out roughly <span class="inline_math">\( \sim \)</span>25 applications before I landed a job.
</p>
<div id="uid264" data-tralics-id="uid264" class="subsection" data-number="4.4.1">
<h3>
<a href="#uid264" class="heading hyperref"><span class="number">4.4.1 </span>The Secret System I Used to Make Cold Applying More Effective</a>
</h3>
<p class="noindent">
So what changed?<span class="intersentencespace"></span> A few things changed for me.<span class="intersentencespace"></span> I practiced interviewing with friends.<span class="intersentencespace"></span> Plus, I also had more experience at demanding jobs which I believe made hiring managers more willing to take a chance on me.
</p>
<p>
But the thing that I believed helped make the difference in my cold applications is the secret system I used to make cold applying more effective.
</p>
<div id="uid265" data-tralics-id="uid265" class="subsubsection" data-number="4.4.1.1">
<h4>
<a href="#uid265" class="heading">The McDonald’s Principle for Constructing an Application</a>
</h4>
<p class="noindent">
Now before I tell you about what I did, let’s talk about McDonald’s.<span class="intersentencespace"></span> Have you ever stopped at a McDonald’s or other fast food joint?<span class="intersentencespace"></span> Did you stop there because it was the highest quality food you could find?
</p>
<p>
I bet nine times out of ten you were pressed for time and it was the easiest thing to grab for supper or lunch.<span class="intersentencespace"></span> In other words, it was convenient.
</p>
<p>
Now let’s imagine a hiring manager.<span class="intersentencespace"></span> They have their own team to manage, their own responsibilities, as well as building and scaling out a team.<span class="intersentencespace"></span> They’re pretty time crunched, wouldn’t you say?<span class="intersentencespace"></span> So if one candidate came along and made it really easy for the hiring manager to decide if they’re a great fit technically, do you think they would be more likely to get hired if they were a great fit?<span class="intersentencespace"></span> If you said “yes”, you would be right.<span class="intersentencespace"></span> When you’re time-pressed, convenience is a really great benefit.
</p>
</div>
<div id="uid266" data-tralics-id="uid266" class="subsubsection" data-number="4.4.1.2">
<h4>
<a href="#uid266" class="heading">Applying the McDonald’s Principle To Replicate My Secret System</a>
</h4>
<p class="noindent">
So how do you make it convenient for the hiring manager to look through your portfolio?<span class="intersentencespace"></span> There are really 3 easy steps you can follow.
</p><div3 id="uid267" data-tralics-id="uid267" data-number="">Step 1 – Decide what projects / samples you want and show them in order of strongest to weakest</p>
<p>
Now a sample can be a blog post, a piece of code, or ideally, a portfolio project.<span class="intersentencespace"></span> Let’s take an example of a list you might jot down:
</p>
<ol>
<li>
Portfolio Project #1: jQuery plugin that changes the color of your navbar
</li>
<li>
Portfolio Project #2: Python project that scrapes facebook data
</li>
<li>
blog post about Python dictionary
</li>
<li>
Code sample of a command line script
</li>
<li>
The first jQuery plugin you wrote
</li>
</ol>
<p>
So you can see I jotted down 5 items above in order of what might be strongest to weakest in a hypothetical lineup.
</p></div3> <div3 id="uid273" data-tralics-id="uid273" data-number="">Step 2 – Now make a template document to point to these projects</p>
<p>
The next step is to make a Word document (or whatever you decide is the best way to convey the information) that links to your projects in step 1 and describes a bit about them.<span class="intersentencespace"></span> When I was doing this I made a Word document and converted it to PDF.
</p>
<p>
This is because some job portals such as StackOverflow couldn’t accept multiple documents.<span class="intersentencespace"></span> So oftentimes, I would put the PDF, resume, and cover letter in one zip file.<span class="intersentencespace"></span> Then I would rename the zip file with a “.doc” extension and send a note through the job portal to rename the “.doc” back to a “.zip” extension.
</p>
<p>
Now you might think this is a bit dangerous in the sense that the person on the other end might not know how to do this (people are used to double clicking and easily opening a file), but I still received interview offers which turned into job offers following this process.
</p></div3> <div3 id="uid274" data-tralics-id="uid274" data-number="">Step 3 – Be efficient about personalizing the cover letter</p>
<p>
So now that you have a template for enabling hiring managers to quickly and conveniently vet your skills, it’s time to make the whole process even more efficient.<span class="intersentencespace"></span> Here is what I suggest: Make a stock cover letter with 2 or 3 key sentences that you can personalize.
</p>
<p>
For example, you might have a template such as:
</p>
<blockquote class="quotation">
<p class="quote">
To Whom It May Concern:<br /> I applied to your company because I am interested in [fill in these technologies].<span class="intersentencespace"></span> My skillset of Ruby on Rails and ReactJS fits nicely and I know I would be able to help your company expand [fill in this niche market].<span class="intersentencespace"></span>
</p>
</blockquote>
<p>
Now your cover letter will be longer, but the above example should give you an idea.
</p></div3> <div3 id="uid275" data-tralics-id="uid275" data-number="">Step 4 – Tracking</p>
<p>
The final piece of the puzzle to applying cold more effectively is to track your job applications.<span class="intersentencespace"></span> I use a Google Documents spreadsheet with columns containing the company applied to, the date I applied, how much I like it, and what stage I’m in with the company (e.g., phone interview, technical interview, offer letter, etc.)
</p>
<p>
This gives me a sense of how I’m doing overall.<span class="intersentencespace"></span> I tend to think of the job application process as a sales funnel where you’re selling yourself.<span class="intersentencespace"></span> I ask myself “is my conversion rate 10%, 50%, or 100%”?
</p></div3> <div3 id="uid276" data-tralics-id="uid276" data-number="">Summary</p>
<p>
So there you have it.<span class="intersentencespace"></span> This is the system I use to cold apply to jobs so a hiring manager can figure out if I fit into their organization with the convenience of a McDonald’s operation.
</p></div3> <div3 id="uid277" data-tralics-id="uid277" data-number="">Chapter 4.5 A Word On Warm vs Cold Applications</p>
<p>
One reader asked me:
</p>
<blockquote class="quotation">
<p class="quote">
Should you try to find a job through connections or applications?<span class="intersentencespace"></span> Is there a middle ground?<span class="intersentencespace"></span> How do you obtain and maintain strong connections?<span class="intersentencespace"></span> And then, how do you use your connections to get a job?<span class="intersentencespace"></span>
</p>
</blockquote>
<p>
It is always easier to find jobs through warm connections rather than a cold application.<span class="intersentencespace"></span> But let’s examine why this is.<span class="intersentencespace"></span> And along the way I’ll tell you the story of the Friendly Programmer (PP for short) and what that means.
</p><div4 id="uid278" data-tralics-id="uid278" data-number="">Why It’s Easier to Find Jobs Through Warm Connections</p>
<p>
In today’s modern world of corporate programming, there’s no company without office politics, as evidenced by the overwhelming popularity of the Dilbert cartoon strip).<span class="intersentencespace"></span> That means when people refer someone they are risking their professional reputations on that reference.
</p>
<p>
So there is a strong incentive to get that reference right.<span class="intersentencespace"></span> And if that reference comes to be perceived from someone as “good”, then the referred leaps to the head of the pack in terms of getting an interview.<span class="intersentencespace"></span> And reading research on perception, it’s been shown that people are biased by first impressions.<span class="intersentencespace"></span> And what better first impression to make than a positive reference form within the company?
</p></div4> <div4 id="uid279" data-tralics-id="uid279" data-number="">But what if you have no references from within the company?</p>
<p>
The short answer is you have to cultivate them.<span class="intersentencespace"></span> But how?<span class="intersentencespace"></span> Let me tell you the story of someone I’ll call Friendly Programmer.<span class="intersentencespace"></span> This is based on a combination of stories from various friends in the industry.<span class="intersentencespace"></span> I’ve changed some of the facts to protect identities, but the overall narrative is true.
</p>
<p>
Friendly Programmer (FP from here on out) graduated from a bootcamp and was brand spanking new to the industry.<span class="intersentencespace"></span> His resume didn’t say “MIT, Computer Science”.<span class="intersentencespace"></span> It said something more akin to “XYZ Bootcamp, 3 months experience”.
</p>
<p>
But 2 years later, FP had a job as a software engineer.<span class="intersentencespace"></span> How did this happen?<span class="intersentencespace"></span> FP started cold by submitting his resume to various companies.<span class="intersentencespace"></span> What happened?<span class="intersentencespace"></span> Rejection.<span class="intersentencespace"></span> So then FP began attending a local technology meetup.<span class="intersentencespace"></span> As it so happens, one of the meetup attendees was a hiring manager at the company FP had applied to earlier.
</p>
<p>
Now FP was by no means a rockstar programmer.<span class="intersentencespace"></span> He wasn’t a core contributor to a popular framework or library.<span class="intersentencespace"></span> He didn’t graduate from any place sexy like MIT or Harvard.<span class="intersentencespace"></span> But FP was very good at making friends.<span class="intersentencespace"></span> And by the time my friend had joined FP’s team at a company we’ll call “Bro Startup” (or BS for short), FP was beloved by the hiring manager.<span class="intersentencespace"></span> In fact, my friend was able to point out several instances of overt favoritism (being promoted because he was the boss’s friend instead of because FP did great work) because the hiring manager liked FP so much.
</p>
<p>
Now the point of this story isn’t to call out all the problems in corporate America (although please let it serve as a warning).<span class="intersentencespace"></span> It’s about how being involved in your technology community can lead to making friends.<span class="intersentencespace"></span> This can ultimately lead to you getting hired.
</p></div4> <div4 id="uid280" data-tralics-id="uid280" data-number="">How to Maintain Professional Connections</p>
<p>
Personally, I’ve always found navigating corporate politics to be much harder (and way less fun) than doing the actual day to day software engineering.<span class="intersentencespace"></span> But if you insist on working for a company, it is necessary lest you enjoy getting run over.
</p>
<p>
For maintaining professional connections, I prefer setting up a CRM (contact relationship management) system to remind me to occasionally schedule lunches to reconnect with old co-workers, friends, and neighbors.<span class="intersentencespace"></span> I have a Christmas card list in a Google Documents spreadsheet.<span class="intersentencespace"></span> But now I’m thinking about switching to a software based CRM system that I’m going to write myself.
</p>
<p>
Maintaining connections doesn’t have to be anything formal or too hard, but it does take some effort if it’s not a habit for you yet.<span class="intersentencespace"></span> That’s why I like setting up a CRM like system to enforce some regularity to it.
</p></div4></div3>
</div>
</div>
<ul>
<li>
see the Bonuses in <a href="#cha-bonuses_experience" class="hyperref">Chapter <span class="undefined_ref">cha:bonuses_experience</span></a>
</li>
</ul>
<p class="noindent">
Have you ever seen the edible fruit baskets from Eddible Arrangements?<span class="intersentencespace"></span> I used to think who would want to pay extra money for a nice arrangement of fruit.<span class="intersentencespace"></span> Then I realized a fruit basket done like a flower bouqet makes a much better gift than a bowl of fruit.
</p>
<p>
But what does this have to do with you as a candidate?
</p>
<p>
If you recall from the previous chapter, we talked about helping time-crunched hiring managers navigate your portfolio and relevant experience.<span class="intersentencespace"></span> Now we’re going to dive into how to package yourself as the best candidate for the position.
</p>
<p>
According to research, it takes <a href="https://www.theguardian.com/science/2006/aug/23/usnews.internationalnews" target="_blank" rel="noopener">one tenth of a second</a> for us to form a first impression of a person.<span class="intersentencespace"></span> So how do you make that first great impression now that you’re a candidate ready to be interviewed?
</p>
<p class="noindent">
Now suppose the company you’re interviewing with gives you an open-ended coding sample.<span class="intersentencespace"></span> In other words, you get to submit a project of your choice (this has actually happened to me).<span class="intersentencespace"></span> What’s the best way to get through this?
</p>
<div id="uid282" data-tralics-id="uid282" class="subsection" data-number="5.1.1">
<h3>
<a href="#uid282" class="heading hyperref"><span class="number">5.1.1 </span>Step 1 – Thought Process</a>
</h3>
<p class="noindent">
The first concept to understand is what I like to call a “thought process”.<span class="intersentencespace"></span> From a technical skills perspective, a hiring manager is looking for your skillset across 2 dimensions – the algorithmic dimension and the prototype dimension.
</p>
<p>
By algorithmic dimension I simply mean whether you can come up with an elegant step by step solution through code.<span class="intersentencespace"></span> By prototype dimension, I refer to whether or not you can ship a prototype app with a good user experience.
</p>
<p>
Different types of positions require different levels of facility with each dimenson.<span class="intersentencespace"></span> It really depends on the company and the hiring manager.
</p>
<p>
For example, a data engineer position might require more of an “algorithmic” thinking process.<span class="intersentencespace"></span> A good coding project to demonstrate this might be an URL shortener (there will be a mathematical component to this project).
</p>
<p>
This is different from a full stack developer position, which might require you to churn out app features really fast.<span class="intersentencespace"></span> In this case, a good project might be to do a leaderboard with a good user experience.
</p>
</div>
<div id="uid283" data-tralics-id="uid283" class="subsection" data-number="5.1.2">
<h3>
<a href="#uid283" class="heading hyperref"><span class="number">5.1.2 </span>Step 2 – What To Do When You Don’t Know What They Want</a>
</h3>
<p class="noindent">
During the interview process for one of my first startup jobs, I was talking to the recruiter after I had been made an offer, and we were talking about what qualities startups valued in candidates.<span class="intersentencespace"></span> I had submitted a sample coding project that had been well-received.
</p>
<p>
The recruiter told me that there had also been another candidate in the running but he kept asking the CTO way too many questions at each step.<span class="intersentencespace"></span> This was in contrast to me where I just came up with something and shipped it within a day or two (after working full-time at my day job).<span class="intersentencespace"></span> Since this company was an early-stage startup, the CTO took it as a sign that the other candidate would ask that many questions on a daily basis if he were hired.
</p>
<p>
This made the candidate a no-hire.
</p>
<div id="uid284" data-tralics-id="uid284" class="subsubsection" data-number="5.1.2.1">
<h4>
<a href="#uid284" class="heading">But how do you know how to ask good questions to a prospective employer if you genuninely have a question?</a>
</h4>
<p class="noindent">
I use a 3 step technique that I heard from some online entrepreneur like Ramit Sethi or Tim Ferris.<span class="intersentencespace"></span> I can’t quite recall at the moment.<span class="intersentencespace"></span> But it’s pretty easy.
</p>
<p>
The first step is to ask yourself the question.<span class="intersentencespace"></span> Next, come up with 3 answers on your own.<span class="intersentencespace"></span> Finally, ask the question to the prospective employer.<span class="intersentencespace"></span> This technique has always helped me either refine the question so that it makes me seem like a well-prepared candidate or it helped me answer the question on my own.
</p>
</div>
</div>
<div id="uid285" data-tralics-id="uid285" class="subsection" data-number="5.1.3">
<h3>
<a href="#uid285" class="heading hyperref"><span class="number">5.1.3 </span>Step 3 – A Good Readme</a>
</h3>
<p class="noindent">
And now we come to the last step of pitching your coding project to the prospective employer – constructing a good Readme file.<span class="intersentencespace"></span> Now, why give them a Readme even if they don’t ask?
</p>
<p>
There’s a couple of good reasons.<span class="intersentencespace"></span> The first is that a well-written readme file shows how well you communicate.<span class="intersentencespace"></span> In today’s workplace of cross-functional teams, showing how well you communicate is a crucial soft skill.<span class="intersentencespace"></span> The other reason is that it’s a nice subtle way you to present yourself as the best candidate.<span class="intersentencespace"></span> It demonstrates a level of preparation and thoroughness that can help you stand out amongst others.
</p>
<p>
You can also use the Readme to show off how good your analytical thinking skills are.<span class="intersentencespace"></span> Let’s dive deeper into creating a kickass readme.
</p>
<div id="uid286" data-tralics-id="uid286" class="subsubsection" data-number="5.1.3.1">
<h4>
<a href="#uid286" class="heading">Format for a Kickass Readme File</a>
</h4>
<ul>
<li>
Good grammar and spelling – The first thing you should make sure of is that your Readme file has good grammar and spelling.<span class="intersentencespace"></span> There was a study that showed the number one predictor of hireability [insert link] was the number of typos in your resume.<span class="intersentencespace"></span> And while there haven’t been any studies for readme files, I’m betting it applies here too.<span class="intersentencespace"></span>
</li>
<li>
Problem(s) it solves and why it’s important – The next section I like to have is to describe the problem your project solves and why it’s important.<span class="intersentencespace"></span>
</li>
<li>
Step by step installation instructions – The third section is to have good step by step installation instructions.<span class="intersentencespace"></span> You want to make it easy for your interviewer to check out your work.<span class="intersentencespace"></span> If you’re doing a web application, I would seriously consider throwing in a link to a live demonstration of your work.<span class="intersentencespace"></span>
</li>
<li>
Approaches and tradeoffs – This last section is here to show your thought process regarding your solution.<span class="intersentencespace"></span> Like any situation you’ll run into in technology, you’ll likely have to make some tradeoffs.<span class="intersentencespace"></span> This section is a good chance to show your thinking behind that.<span class="intersentencespace"></span> It’s not about right versus wrong, it’s about clarity of thought.<span class="intersentencespace"></span>
</li>
</ul>
</div>
<div id="uid291" data-tralics-id="uid291" class="subsubsection" data-number="5.1.3.2">
<h4>
<a href="#uid291" class="heading">An Example of a Good Readme</a>
</h4>
<p class="noindent">
The <a href="https://courses.cs.washington.edu/courses/cse326/02wi/homework/hw5/good-readmes.html" target="_blank" rel="noopener">University of Washington has a page with examples of good readme files from various homework assignments</a>.<span class="intersentencespace"></span> Even though they are for assignments, they apply equally well to a portfolio.
</p>
<p>
<a href="https://courses.cs.washington.edu/courses/cse326/02wi/homework/hw5/README-1.txt" target="_blank" rel="noopener">Let’s look at the first readme example and what the author does well.</a>.
</p>
<p>
In addition to basically following the format for a kickass readme, the author includes a class hierarchy diagram.<span class="intersentencespace"></span> Now I love this!<span class="intersentencespace"></span> I haven’t actually ever included diagrams in any of my coding sample projects I turned in but if you have the time I say go for it!
</p>
<p>
The author also gives an algorithmic analysis for their solution.<span class="intersentencespace"></span> This is another nice touch that could easily be added under the approaches and tradeoffs section of your own readme.
</p>
</div>
</div>
<div id="uid292" data-tralics-id="uid292" class="subsection" data-number="5.2.1">
<h3>
<a href="#uid292" class="heading hyperref"><span class="number">5.2.1 </span>The Relativity Factor in Expertise and Why You Should Feel Encouraged</a>
</h3>
<p class="noindent">
I remember when I first started learning a new programming language called Elixir.<span class="intersentencespace"></span> There were a few basic things I had to relearn such as debugging in this new environment and how to best setup the programming environment to work with Elixir.
</p>
<p>
Then a coworker who was brand new to Elixir asked me to show him the ropes.<span class="intersentencespace"></span> It was at this moment I realized how much I had learned over the past couple of months.<span class="intersentencespace"></span> By comparision, I felt like an “expert”.
</p>
<p>
And if you think about it, this “relativity factor” applies to all kinds of expertise, not just programming.<span class="intersentencespace"></span> If you’ve been playing baseball for years and now your kid brother is just getting started, you would be an “expert” relative to your little brother.<span class="intersentencespace"></span> But you might not feel like such an expert standing next to a famous major league baseball player.
</p>
<p>
And so it is with programming.<span class="intersentencespace"></span> You may not feel like an expert compared to the founders of Google or a programmer like Steve Wozniak, but if you’ve got a few months in, you’re an expert compared to the business owner who knows nothing about programming.
</p>
<p>
Hopefully you feel a bit more encouraged about your prospects as a new programmer.<span class="intersentencespace"></span> The work to become an expert never ends, but for the first job, there are some crucial skills you should brush up on to show you’re up for becoming an “expert”.
</p>
</div>
<div id="uid293" data-tralics-id="uid293" class="subsection" data-number="5.2.2">
<h3>
<a href="#uid293" class="heading hyperref"><span class="number">5.2.2 </span>Honing in on the skills you can control to demonstrate relevant expertise</a>
</h3>
<p class="noindent">
Below are some crucial skills that you can focus on for your first job.
</p>
<div id="uid294" data-tralics-id="uid294" class="subsubsection" data-number="5.2.2.1">
<h4>
<a href="#uid294" class="heading">The power of Git</a>
</h4>
<p class="noindent">
Every company that employs software developers uses some form of version control (or at least every company that would give you valuable experience).<span class="intersentencespace"></span> Today pretty much everyone uses Git for their version control.<span class="intersentencespace"></span> So while I will soon be writing a mini-guide on the basics of Git version control (<a href="https://app.convertkit.com/landing_pages/319564?v=6" target="_blank" rel="noopener">sign up here if you’re interested</a>), in this section I’ll briefly list some of the version control skills you should be comfortable with.
</p>
<ul>
<li>
Branching – You should be able to check out branches and then merge them back into master.<span class="intersentencespace"></span>
</li>
<li>
Track remote branches – You should be able to check out branches and ensure they are tracking remote upstream branches.<span class="intersentencespace"></span>
</li>
<li>
Pushing – You should be able to push your changes up to your companies hosted Git provider (typically most companies use GitHub.com).<span class="intersentencespace"></span>
</li>
<li>
Merging and rebasing – You’ll need to be able to merge and rebase.<span class="intersentencespace"></span>
</li>
<li>
Diff – You’ll need to be able to see the changes you make.<span class="intersentencespace"></span> “git diff” allows you to do this.<span class="intersentencespace"></span>
</li>
<li>
Team-based git workflow – If you are not familiar with how teams use Git, I suggest you <a href="http://nvie.com/posts/a-successful-git-branching-model/" target="_blank" rel="noopener">read this post</a>.<span class="intersentencespace"></span>
</li>
</ul>
</div>
<div id="uid301" data-tralics-id="uid301" class="subsubsection" data-number="5.2.2.2">
<h4>
<a href="#uid301" class="heading">Tooling for your particular technology stack</a>
</h4>
<p class="noindent">
Right now, JavaScript is all the rage.<span class="intersentencespace"></span> So if you’re going to be a front end JavaScript developer, you should learn the modern JavaScript/front end tooling and workflow.<span class="intersentencespace"></span> Right now that involves things like webpack, grunt and/or gulp task runners, npm, yarn, and the new ES6 (Ecmascript 6) syntax.
</p>
<p>
If you’re a Ruby developer, you should get familiar with bundler, rvm/rbenv/chruby (for managing your system ruby and associated gems), RSpec, Ruby on Rails, and the asset pipeline.
</p>
<p>
If you have a different technology stack other than Ruby or JavaScript, there’s probably a standard suite of tools you should learn.
</p>
</div>
<div id="uid302" data-tralics-id="uid302" class="subsubsection" data-number="5.2.2.3">
<h4>
<a href="#uid302" class="heading">Text Editor Skills</a>
</h4>
<p class="noindent">
When you’re just starting out, one common question that seems to arise is “Does it matter whether I use Vim, Sublime, or Atom?”<span class="intersentencespace"></span> (or emacs or whatever the hot text editor is).<span class="intersentencespace"></span> I started out by using Sublime.<span class="intersentencespace"></span> One of my former bosses used Textmate.<span class="intersentencespace"></span> I would argue it doesn’t really matter what text editor you use when you’re first starting out.<span class="intersentencespace"></span> But there are a set of core features that you should master in your text editor to make developing faster (I personally know that Vim and Sublime have these):
</p>
<ul>
<li>
Fuzzy file finding – With a few keystrokes, you should be able to find a file by name very easily.<span class="intersentencespace"></span>
</li>
<li>
Easy search and replace – With a few keystrokes, you should be able to search and replace a string (e.g., such as a variable name you want to change).<span class="intersentencespace"></span>
</li>
<li>
Easily navigate through a file – Be able to jump down a few hundred lines with a few keystrokes.<span class="intersentencespace"></span>
</li>
<li>
Syntax highlighting – I love syntax highlighting as it makes everything easier to read and also gives a visual cue as to whether or not you are using a programming language reserved word.<span class="intersentencespace"></span>
</li>
<li>
See what lines have changed (optional) – In my experience, Vim or Sublime have plugins that let you easily see what changes you have made to a line or lines in your file(s).<span class="intersentencespace"></span> It’s like a visual “git diff”.<span class="intersentencespace"></span>
</li>
</ul>
</div>
<div id="uid308" data-tralics-id="uid308" class="subsubsection" data-number="5.2.2.4">
<h4>
<a href="#uid308" class="heading">Navigating the command line</a>
</h4>
<p class="noindent">
Most startups I’ve worked at provide you with a Mac OSx laptop.<span class="intersentencespace"></span> I’ve also found most open source technologies such as Python, Ruby, or JavaScript tend to be developed towards a Linux bias.<span class="intersentencespace"></span> In other words, it’s easier to develop if you are in an environment with a Linux (or Linux/Unix like) command line (e.g., Ubuntu Linux or MacOSx).
</p>
</div>
<div id="uid309" data-tralics-id="uid309" class="subsubsection" data-number="5.2.2.5">
<h4>
<a href="#uid309" class="heading">Knowing where to get answers</a>
</h4>
<p class="noindent">
It’s also helpful to stay aware of the tools in your community and what the latest upcoming stuff is.<span class="intersentencespace"></span> I like to scout out newsletters and read those to stay up to date.<span class="intersentencespace"></span> For example, in the Ruby and JavaScript spaces, <a href="https://rubyweekly.com/" target="_blank" rel="noopener">Ruby Weekly</a> and <a href="http://javascriptweekly.com/" target="_blank" rel="noopener">JavaScript Weekly</a>
</p>
<p>
I also like to join community forums (or slack or irc channels) and stay involved there as much as I can.<span class="intersentencespace"></span> And of course, local tech meetups are a great way to keep your finger on the pulse of the community you’re involved in.
</p>
</div>
</div>
<p class="noindent">
Now let’s say you’ve been doing all the things to build a knockout portfolio and make yourself standout as a candidate, but you still can’t find a job.<span class="intersentencespace"></span> Another possible way forward is to get involved in open source.
</p>
<p>
Why get involved in open source?<span class="intersentencespace"></span> It’s a great way to show that you can collaborate with others.<span class="intersentencespace"></span> You’ll also likely get to learn the nuances of the particular language that open source project is written in.<span class="intersentencespace"></span> In addition, you’re working on a real world project that’s likely in use by others (depending on how popular of a project you pick).<span class="intersentencespace"></span> So if I’ve sold you on working on open source, read on.
</p>
<div id="uid310" data-tralics-id="uid310" class="subsection" data-number="5.3.1">
<h3>
<a href="#uid310" class="heading hyperref"><span class="number">5.3.1 </span>How to Get Involved in Open Source If You’re a Total Newbie</a>
</h3>
<p class="noindent">
Bundler open source contributor Andre Arko did a great <a href="https://www.youtube.com/watch?v=6jUe-9Y__KM" target="_blank" rel="noopener">talk at RubyConf 2016</a> about how to get involved in open source in just 15 minutes a day!<span class="intersentencespace"></span> Here are some highlights (though I highly suggest you watch the talk if you want to take this route):
</p>
<ul>
<li>
step 1: wtf (what is happening in the project?<span class="intersentencespace"></span> Read the changelog, readme, etc., open the github issues – read every comment, problem, every person that doesn’t understand what is happening, etc.)<span class="intersentencespace"></span> – so on Rails, it might take you weeks to read every single issue at 15 min/day (Steve Klabnik did this);
</li>
<li>
step 2: answer questions – now you can answer the questions you know the answer to from step 1
</li>
<li>
step 3: help with issues – you now have the context to help fix some of the problems (bug reproduction steps)
</li>
<li>
step 4: reproduce bugs – makes it possible to write a test which makes it possible to fix the problem (contributors who do this are amazing)
</li>
<li>
step 5: writing patches
</li>
<li>
step 6: improve everything – once you have enough experience to do things, you start noticing all the problems you to make better
</li>
<li>
step 7: you’re doing it!<span class="intersentencespace"></span> – if you do this you’ll probably be on the core team because you’re making the project run
</li>
<li>
step 8: now you’re in charge (congrats and condolences)
</li>
</ul>
</div>
<div id="uid319" data-tralics-id="uid319" class="subsection" data-number="5.3.2">
<h3>
<a href="#uid319" class="heading hyperref"><span class="number">5.3.2 </span>Showcasing Your Open Source Contributions</a>
</h3>
<p class="noindent">
Remember the application template we made following the McDonald’s principle to make it convenient for the hiring manager to look at your work?<span class="intersentencespace"></span> This is a great place to add links to the actual pull requests that showcase your ability to make open source contributions.
</p>
<p>
Here’s an example of a <a href="https://github.com/namick/obfuscate_id/pull/30" target="_blank" rel="noopener">change I made to a gem called obfuscate_id</a> that I linked to in my application template when I applied to various jobs.
</p>
</div>
<div id="uid320" data-tralics-id="uid320" class="subsection" data-number="5.3.3">
<h3>
<a href="#uid320" class="heading hyperref"><span class="number">5.3.3 </span>Contribute to Something the Company Built</a>
</h3>
<p class="noindent">
Another way to get involved in open source is to try and contribute to an open source library a company has built.<span class="intersentencespace"></span> It would be similar to the patch I made to obfuscate_id that I talked about in the previous section.<span class="intersentencespace"></span> Or you could contribute to a framework that the company uses.
</p>
<p>
For example if a company uses Ruby on Rails, you could contribute to Ruby on Rails.
</p>
</div>
<p class="noindent">
I’ve interviewed at quite a few different places now.<span class="intersentencespace"></span> Here’s what to expect.
</p>
<div id="uid321" data-tralics-id="uid321" class="subsection" data-number="5.4.1">
<h3>
<a href="#uid321" class="heading hyperref"><span class="number">5.4.1 </span>Stages of an Interview</a>
</h3>
<p class="noindent">
Pretty much every coding job follows roughly the same series of interview steps.<span class="intersentencespace"></span> There’s the initial phone screen (“gatekeeper stage”), technical phone screen, coding project, and on-site interview.
</p>
<div id="uid322" data-tralics-id="uid322" class="subsubsection" data-number="5.4.1.1">
<h4>
<a href="#uid322" class="heading">Stage 1: Gatekeeper Phone Screen</a>
</h4>
<p class="noindent">
With the initial phone screen (usually done by a human resources “gatekeeper”), I find they check for red flags such as a lack of motivation and commitment, “job-hopping” for the wrong reasons, and trying to ensure the candidate doesn’t have salary requirements completely out of whack with what the company can pay.
</p>
<p>
As a side note, you should try to avoid talking about salary at all until they’re ready to make you an offer.<span class="intersentencespace"></span> If you name a number first, you’re making a classic salary negotiation mistake and you’ll end up getting a lower offer most likely.
</p>
</div>
<div id="uid323" data-tralics-id="uid323" class="subsubsection" data-number="5.4.1.2">
<h4>
<a href="#uid323" class="heading">Stage 2: Technical Phone Screen</a>
</h4>
<p class="noindent">
After getting through the gatekeeper, the technical phone screen usually involves talking with one of the team’s senior engineers or the actual engineering team lead.
</p>
<p>
They might give you a couple of sample coding challenges or have you talk through how you would solve a problem (I’ve experienced variants of both of these).
</p>
</div>
<div id="uid324" data-tralics-id="uid324" class="subsubsection" data-number="5.4.1.3">
<h4>
<a href="#uid324" class="heading">Stage 3: Coding Project (sometimes optional)</a>
</h4>
<p class="noindent">
The next stage, which sometimes startups skip, is a take home coding project of some kind.<span class="intersentencespace"></span> Sometimes the parameters are well-defined, and other times it’s an open ended coding challenge.
</p>
<p>
The idea here is the company wants to get a sample of how you approach a simulated “real-world” coding problem.<span class="intersentencespace"></span> The ideal is for you guys to try each other out for 3 months and see if you’re a good fit, but of course, with time constraints, that’s not possible.
</p>
<p>
I actually have a whole webinar devoted to talking you through how to approach a coding sample project.
</p>
</div>
<div id="uid325" data-tralics-id="uid325" class="subsubsection" data-number="5.4.1.4">
<h4>
<a href="#uid325" class="heading">Stage 4: On-site Interview</a>
</h4>
<p class="noindent">
Congratulations if you’ve made this far!<span class="intersentencespace"></span> At this point, it’s about culture fit and the company making sure they didn’t miss anything about you.<span class="intersentencespace"></span> Now they’ll be sussing out if they can work with you on a social basis.
</p>
</div>
</div>
<div id="uid326" data-tralics-id="uid326" class="subsection" data-number="5.4.2">
<h3>
<a href="#uid326" class="heading hyperref"><span class="number">5.4.2 </span>Types of Questions You Can Expect Throughout the Interview Process</a>
</h3>
<p class="noindent">
We’ll be covering interviewing in the next chapter, but to here’s a rundown of what you can expect.
</p>
<ul>
<li>
Algorithmic Questions – In general, I’ve almost always had to answer algorithmic type questions.<span class="intersentencespace"></span> You’ll sometimes hear people refer to this derogatorily as “whiteboarding”.<span class="intersentencespace"></span> There’s some debate about how representative this is of your ability to do the job, but there are enough companies out there still doing it that you’ll likely get asked about it.<span class="intersentencespace"></span>
</li>
<li>
Basic knowledge questions related to your tech stack
</li>
<li>
Behavior/culture questions
</li>
</ul>
<p>
Now, we’ll cover interviewing in a later chapter but I wanted to give you an overview here.
</p>
</div>
<p class="noindent">
Even in this day and age, developers (especially those starting out) will still need to send out the occasional resume, especially if they don’t know anyone in the company.<span class="intersentencespace"></span> This <a href="https://www.careercup.com/resume" target="_blank" rel="noopener">article from careercup.com</a> gives some great tips for a winning resume.<span class="intersentencespace"></span> A one page resume with brief accomplishment-oriented bullets is the way to go.
</p>
<p>
You do want to make sure you proofread your resume (and hopefully get another set of eyes on it too).<span class="intersentencespace"></span> According to <a href="http://blog.alinelerner.com/lessons-from-a-years-worth-of-hiring-data/" target="_blank" rel="noopener">Aline Lerner</a>, an engineer who started a company around helping engineers practice for interviews, her data showed her that for resumes, typos had the biggest effect on a candidate’s chances of being hired.<span class="intersentencespace"></span> NOT personal projects.<span class="intersentencespace"></span> NOT GPA. NOT a Computer Science degree from a top school.<span class="intersentencespace"></span> It’s an interesting read if you have time, but the point is, double check your resume!
</p>
<ul>
<li>
see the Bonuses in <a href="#cha-bonuses_experience" class="hyperref">Chapter <span class="undefined_ref">cha:bonuses_experience</span></a>
</li>
</ul>
<p class="noindent">
First impressions do count.<span class="intersentencespace"></span> Don’t believe me?<span class="intersentencespace"></span> <a href="http://theundercoverrecruiter.com/infographic-how-interviewers-know-when-hire-you-90-seconds/" target="_blank" rel="noopener">Here’s what the undercover recruiter has to say:</a>
</p>
<blockquote class="quotation">
<p class="quote">
When meeting new people, 55% of the impact comes from the way the person dresses, acts and walks through the door.<span class="intersentencespace"></span> 33% of bosses know within the first 90 seconds of an interview whether they will hire someone.<span class="intersentencespace"></span> The number one most common mistake at a job interview is: failing to ask for the job.<span class="intersentencespace"></span>
</p>
</blockquote>
<div id="uid331" data-tralics-id="uid331" class="subsection" data-number="6.1.1">
<h3>
<a href="#uid331" class="heading hyperref"><span class="number">6.1.1 </span>Sample Algorithm Questions</a>
</h3>
<p class="noindent">
I compiled a list of 10 sample algorithm questions.<span class="intersentencespace"></span> Some of them are twists on questions I have actually encountered during the interview stages.<span class="intersentencespace"></span> You can find them <a href="" target="_blank" rel="noopener">here</a>
</p>
</div>
<div id="uid332" data-tralics-id="uid332" class="subsection" data-number="6.1.2">
<h3>
<a href="#uid332" class="heading hyperref"><span class="number">6.1.2 </span>Where to go for more algorithmic practice</a>
</h3>
<p class="noindent">
Here’s a list of interactive coding challenges that will let you practice.<span class="intersentencespace"></span> It’s pretty much what I listed out in Chapter 3, minus the site exercism.io, which focuses more on readable code rather than the “algorithmic” side of things.
</p>
<ol>
<li>
<a href="https://www.hackerrank.com/" target="_blank" rel="noopener">HackerRank</a> – This is an interesting site which although I haven’t used I’ve heard good things about.<span class="intersentencespace"></span> You can do problems and if you score well enough, companies use it as a recruiting tool.<span class="intersentencespace"></span>
</li>
<li>
<a href="https://codefights.com/" target="_blank" rel="noopener">Codefights</a> – A site similar to HackerRank which I also haven’t tried yet.<span class="intersentencespace"></span>
</li>
<li>
<a href="https://www.topcoder.com/" target="_blank" rel="noopener">Topcoder</a> – Topcoder is a site I enjoy because of their “match editorials”.<span class="intersentencespace"></span> You can participate in algorithm challeneges and you can get solutions to the problems you don’t understand.<span class="intersentencespace"></span> The only thing is that there are only 4 languages represented: Java, C++, Python, and VB.net.<span class="intersentencespace"></span>
</li>
<li>
<a href="http://codewars.com/" target="_blank" rel="noopener">Codewars</a> – This is somewhat similar to Topcoder but with a larger variety of programming languages.<span class="intersentencespace"></span>
</li>
<li>
<a href="https://projecteuler.net/" target="_blank" rel="noopener">Project Euler</a> – So Project Euler is a fun little site that gives you mathematical programming challenges.<span class="intersentencespace"></span> The challenges get progressively harder.<span class="intersentencespace"></span>
</li>
<li>
<a href="https://leetcode.com/" target="_blank" rel="noopener">Leetcode</a> – A programming interview question site.<span class="intersentencespace"></span> I’ve heard good things about it but haven’t tried it.<span class="intersentencespace"></span>
</li>
<li>
<a href="https://www.interviewcake.com/" target="_blank" rel="noopener">Interview Cake</a> – Another programming interview questions site.<span class="intersentencespace"></span> I’ve heard good things about it but haven’t had a chance to try it yet.<span class="intersentencespace"></span>
</li>
</ol>
</div>
<div id="uid340" data-tralics-id="uid340" class="subsection" data-number="6.1.3">
<h3>
<a href="#uid340" class="heading hyperref"><span class="number">6.1.3 </span>Why should I care about these algorithmic puzzles even if I don’t use them daily?</a>
</h3>
<p class="noindent">
There’s been a bit of a backlash against what’s known as “whiteboarding”.<span class="intersentencespace"></span> These are the types of brainteasers Google and Facebook are know for but that most software engineers don’t use in their typical day to day lives.<span class="intersentencespace"></span> For example, you might be asked at a Google interview:
</p>
<blockquote class="quotation">
<p class="quote">
How many trailing zeros are in the number 5!<span class="intersentencespace"></span> (5 factorial)?<span class="intersentencespace"></span>
</p>
</blockquote>
<p>
Your actual use of this knowledge in your day to day would probably be zero.<span class="intersentencespace"></span> But the main reason you should care about these puzzles is that companies still use them as interview questions.
</p>
</div>
<p class="noindent">
Chapter 3 has a list of front end and back end interview questions I think you should review.<span class="intersentencespace"></span> What I’d like to focus on is a strategy for dealing with questions you don’t know the answer to.
</p>
<div id="uid341" data-tralics-id="uid341" class="subsection" data-number="6.2.1">
<h3>
<a href="#uid341" class="heading hyperref"><span class="number">6.2.1 </span>How to handle a question you don’t know the answer to…</a>
</h3>
<p class="noindent">
As you do more interviews, this will happen more to you.<span class="intersentencespace"></span> My first piece of advice is whatever you do, do not lie.<span class="intersentencespace"></span> Don’t try and bullshit your way out.
</p>
</div>
<div id="uid342" data-tralics-id="uid342" class="subsection" data-number="6.2.2">
<h3>
<a href="#uid342" class="heading hyperref"><span class="number">6.2.2 </span>Case 1: You think you might know but you’re not sure</a>
</h3>
<p class="noindent">
For this case, a really good way to answer this is to say “I’m not entirely sure, but can I take an educated guess?”.
</p>
</div>
<div id="uid343" data-tralics-id="uid343" class="subsection" data-number="6.2.3">
<h3>
<a href="#uid343" class="heading hyperref"><span class="number">6.2.3 </span>Case 2: You really have no clue</a>
</h3>
<p class="noindent">
For this case, I might answer with something like “I don’t know, but can I use Google, or can you give me a hint if that’s not feasible?”<span class="intersentencespace"></span> This shows the interviewer you’re at least honest, and willing to dive in with them to solve the problem.
</p>
</div>
<p class="noindent">
The technical parts of the interview are usually what people obsess about, but I’ve still seen enough questions on Reddit about basic behavioral questions that I think it’s worth preparing for.<span class="intersentencespace"></span> After all, why ace the technical portions only to have a hiring manager decide to pass because you flubbed a behavioral question?
</p>
<p>
There’s plenty of books <a href="https://www.amazon.com/gp/product/158008849X/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=158008849X&linkCode=as2&tag=bwpark-20&linkId=58a6f6de44a8d54fa1394029480d72e3" target="_blank" rel="noopener">like this one</a><span rend="inline" file="//ir-na.amazon-adsystem.com/e/ir?t=bwpark-20l=am2o=1a=158008849X"></span> that cover basic interview questions, so I won’t try to cover them all.<span class="intersentencespace"></span> Instead, I’ll try and cover the basic ones that trip people up.
</p>
<div id="uid344" data-tralics-id="uid344" class="subsection" data-number="6.3.1">
<h3>
<a href="#uid344" class="heading hyperref"><span class="number">6.3.1 </span>A List of Common Behavioral Questions That Trip People Up</a>
</h3>
<p class="noindent">
The first principle that you should adhere to when answering questions in interviews is to always be positive (or at the very least non-negative).<span class="intersentencespace"></span> This doesn’t mean you lie, but it does mean you should be prepared to tell white lies or “gloss over” the whole truth.
</p>
<p>
If this feels “icky”, I feel your pain.<span class="intersentencespace"></span> But think of it this way, when someone asks “how are you?”, you don’t necessarily tell them all about the corns on your feet, your gastrointestinal problems, and/or your sinuses (or at least I hope you don’t).<span class="intersentencespace"></span> Usually, you’ll reply with something like “I’m fine”.
</p>
<p>
And so it must be with your interviewer.<span class="intersentencespace"></span> Think of your interviewer as a first date where you want to make a good impression.
</p>
<p>
1 – Why are you leaving your current position?
</p>
<p>
Ah, this is a tricky one.<span class="intersentencespace"></span> The best answer (if it’s true) for leaving is that your company is laying off people or in some kind of financial trouble.
</p>
<p>
Unfortunately, sometimes you may be leaving because of a horrible boss, co-worker(s), or some combination thereof.<span class="intersentencespace"></span> In which case, you can’t say that (I know, this is where you need to wade through the “ickiness”).<span class="intersentencespace"></span> Remember our rule about being positive?
</p>
<p>
So now you need to have an answer along the lines of “I’m looking for an opportunity to learn new skills that my current company can’t provide.”<span class="intersentencespace"></span> Ideally, you should be able to back up your statement with a fact if your interviewer probes further.
</p>
<p>
For example, if you tried to rotate to another team in your company to learn a new skill but your boss wouldn’t let you go because you were too valuable, you can say “I wanted to learn new skills regarding XYZ but my company is not in a position to allow me to do at this time.”<span class="intersentencespace"></span> You don’t have to tell them everything (in fact, I encourage you not to as this is a “first date”), but you come across as more credible the more detail you’re able to give.<span class="intersentencespace"></span> It’s a bit of a balancing act.<span class="intersentencespace"></span> You get better at it as you go through more interviews.
</p>
<p>
2 – Why do you want to work here?
</p>
<p>
This is the flip side of “why are you leaving?”.<span class="intersentencespace"></span> The best answer should be specific and related to the company’s interests.<span class="intersentencespace"></span> For example, you might answer “I want to work on Ruby on Rails applications in the entertainment industry”.<span class="intersentencespace"></span> Or you might answer, “I’ve been looking for a place to apply my React and Angular skills and am excited about the XYZ project your company is working on.<span class="intersentencespace"></span> Here is how my skillset can help…
</p>
<p>
3 – Tell me about yourself
</p>
<p>
This is not a place to tell your life story.<span class="intersentencespace"></span> Rather, it’s a good place to tell a story to let the company know that you are a top notch candidate and great to work with.<span class="intersentencespace"></span> I usually start by framing the discussion by saying something like, “Sure, let me talk a bit about the projects I’ve worked on.<span class="intersentencespace"></span> Please feel free to stop me if you have any questions.”
</p>
<p>
Then I talk about the projects I’ve worked on and the results that were achieved.
</p>
<p>
4 – What is your greatest weakness?
</p>
<p>
Ooh, this has always been a toughie.<span class="intersentencespace"></span> You don’t want to say anything too damning (“I’m incredibly selfish and greedy”).<span class="intersentencespace"></span> But you also don’t want to look like you’re blowing off the question.
</p>
<p>
The 2 good ways I’ve heard to handle this are to pivot to another topic or answer it by ensuring your weakness is not a necessary requirement for the job.
</p>
<p>
So if you’re answering with a weakness that is not a “necessary part of the job”, then you might answer in a way that shows you’ve improved at something.<span class="intersentencespace"></span> So for example, you might say “Keeping my desk organized wasn’t my strongest attribute, but I recently implemented a system that allows me to keep all my files organized.”<span class="intersentencespace"></span> Notice 2 things.<span class="intersentencespace"></span> The first is that I showed improvement in an area of weakness (a positive) rather than reporting an actual weakness.<span class="intersentencespace"></span> The other other thing is that I mentioned a weakness that most people probably wouldn’t think is a critical part of the job (unless you’re perhaps a secretary).
</p>
<p>
If you’re trying to answer the weakness with a “pivot”, then you might answer with something like “I look forward to working with
</p>
<p>
5 – What would you say your favorite part of working in a team is?
</p>
<p>
The wrong answer to this in 99% of cases is “I prefer to work alone”.<span class="intersentencespace"></span> Almost all software development is done in teams these days with multiple stakeholders – ranging from project managers to fellow software developers.<span class="intersentencespace"></span> The answer I personally give is that you can get a lot more done with a team than you can by working solo.<span class="intersentencespace"></span> This type of statement is both pretty vanilla (i.e., harmless) but also shows you enjoy working with a team (or at least can get things done with one).
</p>
<p>
6 – Why do you want to work remote?
</p>
<p>
If you’re applying for a fully remote job, the wrong answer is “because I’ll have more time to take care of my household chores and it’s more convenient for me”.<span class="intersentencespace"></span> The general principle when answering interview questions is to give answers that show how you are going to benefit the business.
</p>
<p>
A better answer to give might be something along the lines “I concentrate better in remote jobs because I find there are usually less interruptions”.
</p>
</div>
<div id="uid345" data-tralics-id="uid345" class="subsection" data-number="6.3.2">
<h3>
<a href="#uid345" class="heading hyperref"><span class="number">6.3.2 </span>Practice Interviewing with friends</a>
</h3>
<p class="noindent">
One technique that has worked well with me is to practice interviewing with friends, especially if you find you’re struggling to think on your feet to give answers.<span class="intersentencespace"></span> This works better on questions involving soft skills (e.g., “what is your greatest weakness”) rather than the technical questions which you’ll have to study for.
</p>
<p>
As you do more interviews, I think you’ll find that answering the standard soft skill questions becomes a lot easier over time (as well as the technical ones).<span class="intersentencespace"></span> Searching for a new job this last time out, I found I was able to easily answer the standard interview questions (because I’d heard a variant of them before) and I ended up getting a job offer.
</p>
<div id="uid346" data-tralics-id="uid346" class="subsubsection" data-number="6.3.2.1">
<h4>
<a href="#uid346" class="heading">Construct your personal narrative</a>
</h4>
<p class="noindent">
If you’re transitioning from another field, it’s helpful to come up with a personal story.<span class="intersentencespace"></span> The narrative should answer the following questions.
</p>
<p>
1 – Why are you transitioning to web/mobile/software development?<span class="intersentencespace"></span> 2 – How did you get started?<span class="intersentencespace"></span> 3 – How does your previous experience translate into value for our company?
</p>
<p>
So if you’re a teacher transitioning to web development, you might tell the story of how you started building things for your students.<span class="intersentencespace"></span> You might have started with Excel but you decided to build your own web application because you wanted login functionality and separate accounts.<span class="intersentencespace"></span> Then you got so interested you kept building more web/mobile projects.
</p>
<p>
Because you’re a teacher, you can explain how you are good at explaining complicated concepts to others and that could translate to communicating software development issues to business stakeholders.
</p>
<p>
Boom, done!
</p>
</div>
</div>
<p class="noindent">
Whew, you’ve prepared your portfolio and done what you can to stand out from other candidates.<span class="intersentencespace"></span> It’s now time to start applying.
</p>
<div id="uid347" data-tralics-id="uid347" class="subsection" data-number="6.4.1">
<h3>
<a href="#uid347" class="heading hyperref"><span class="number">6.4.1 </span>Target your companies</a>
</h3>
<p class="noindent">
Now that you’ve polished yourself as a candidate with a great portfolio, it’s time to target companies that you think would be a great fit.<span class="intersentencespace"></span> Using the tracking template provided, start making a list of companies.
</p>
</div>
<div id="uid348" data-tralics-id="uid348" class="subsection" data-number="6.4.2">
<h3>
<a href="#uid348" class="heading hyperref"><span class="number">6.4.2 </span>Resources for Preparing for a Tech Interview</a>
</h3>
<p class="noindent">
Below are books and websites you can use to prepare for a technical interview.<span class="intersentencespace"></span> I culled it from this <a href="https://github.com/andreis/interview" target="_blank" rel="noopener">exhaustive list</a> and my own research.
</p>
<p>
For those who are time limited, I’ll give you a time crunched set of resources.
</p>
<div id="uid349" data-tralics-id="uid349" class="subsubsection" data-number="6.4.2.1">
<h4>
<a href="#uid349" class="heading">Books</a>
</h4>
<ol>
<li>
<a href="https://www.amazon.com/gp/product/0984782850/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0984782850&linkCode=as2&tag=bwpark-20&linkId=f53bef13ad4c3e171ae6c0cfc787ff84" target="_blank" rel="noopener">Cracking the Coding Interview: Gayle Laakmann McDowell</a><span rend="inline" file="//ir-na.amazon-adsystem.com/e/ir?t=bwpark-20l=am2o=1a=0984782850"></span>
</li>
<li>
<a href="https://www.amazon.com/gp/product/1118261364/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1118261364&linkCode=as2&tag=bwpark-20&linkId=f42ec93919de5a4502537810e09e561d" target="_blank" rel="noopener">Programming Interviews Exposed</a><span rend="inline" file="//ir-na.amazon-adsystem.com/e/ir?t=bwpark-20l=am2o=1a=1118261364"></span>
</li>
<li>
<a href="https://www.amazon.com/gp/product/1479274836/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1479274836&linkCode=as2&tag=bwpark-20&linkId=abb1c121bbfcf5abcf9aa61ee072ebf5" target="_blank" rel="noopener">Elements of Programming Interviews</a><span rend="inline" file="//ir-na.amazon-adsystem.com/e/ir?t=bwpark-20l=am2o=1a=1479274836"></span>.<span class="intersentencespace"></span>
</li>
</ol>
</div>
</div>
<div id="uid353" data-tralics-id="uid353" class="subsection" data-number="6.4.3">
<h3>
<a href="#uid353" class="heading hyperref"><span class="number">6.4.3 </span>Websites</a>
</h3>
<p class="noindent">
Here’s a list of interactive coding challenges that will let you practice.
</p>
<ol>
<li>
<a href="https://www.hackerrank.com/" target="_blank" rel="noopener">HackerRank</a> – This is an interesting site which although I haven’t used I’ve heard good things about.<span class="intersentencespace"></span> You can do problems and if you score well enough, companies use it as a recruiting tool.<span class="intersentencespace"></span>
</li>
<li>
<a href="https://codefights.com/" target="_blank" rel="noopener">Codefights</a> – A site similar to HackerRank which I also haven’t tried yet.<span class="intersentencespace"></span>
</li>
<li>
<a href="https://www.topcoder.com/" target="_blank" rel="noopener">Topcoder</a> – Topcoder is a site I enjoy because of their “match editorials”.<span class="intersentencespace"></span> You can participate in algorithm challeneges and you can get solutions to the problems you don’t understand.<span class="intersentencespace"></span> The only thing is that there are only 4 languages represented: Java, C++, Python, and VB.net.<span class="intersentencespace"></span>
</li>
<li>
<a href="http://codewars.com/" target="_blank" rel="noopener">Codewars</a> – This is somewhat similar to Topcoder but with a larger variety of programming languages.<span class="intersentencespace"></span>
</li>
<li>
<a href="https://projecteuler.net/" target="_blank" rel="noopener">Project Euler</a> – So Project Euler is a fun little site that gives you mathematical programming challenges.<span class="intersentencespace"></span> The challenges get progressively harder.<span class="intersentencespace"></span>
</li>
<li>
<a href="http://exercism.io/" target="_blank" rel="noopener">Exercism.io</a> – Exercism.io challenges are usually “simpler” in that they are not heavily algorithmic, but they are great because other members of the community can comment on how to make your solution better.<span class="intersentencespace"></span> It’s like free code review.<span class="intersentencespace"></span>
</li>
<li>
<a href="https://leetcode.com/" target="_blank" rel="noopener">Leetcode</a> – A programming interview question site.<span class="intersentencespace"></span> I’ve heard good things about it but haven’t tried it.<span class="intersentencespace"></span>
</li>
<li>
<a href="https://www.interviewcake.com/" target="_blank" rel="noopener">Interview Cake</a> – Another programming interview questions site.<span class="intersentencespace"></span> I’ve heard good things about it but haven’t had a chance to try it yet.<span class="intersentencespace"></span>
</li>
</ol>
<div id="uid362" data-tralics-id="uid362" class="subsubsection" data-number="6.4.3.1">
<h4>
<a href="#uid362" class="heading">Books and Websites for the Time Crunched</a>
</h4>
<p class="noindent">
If you’re hurting for time because you’re working full-time, I suggest you only review the following:
</p>
<ol>
<li>
<a href="https://www.amazon.com/gp/product/0984782850/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0984782850&linkCode=as2&tag=bwpark-20&linkId=f53bef13ad4c3e171ae6c0cfc787ff84" target="_blank" rel="noopener">Cracking the Coding Interview: Gayle Laakmann McDowell</a><span rend="inline" file="//ir-na.amazon-adsystem.com/e/ir?t=bwpark-20l=am2o=1a=0984782850"></span>
</li>
<li>
Choose to do one problem a day from one of Topcoder, Leetcode or Interview Cake.<span class="intersentencespace"></span>
</li>
<li>
If you bomb an interview question, always figure out the answer to it.<span class="intersentencespace"></span>
</li>
</ol>
<p>
These are the 3 things I have done when I was time crunched.
</p>
</div>
</div>
<p class="noindent">
One of the not so fun things about programming jobs is that you will get rejected eventually, especially when you’re new to the industry.<span class="intersentencespace"></span> So here is how you handle turning lemons into lemonade.
</p>
<div id="uid366" data-tralics-id="uid366" class="subsection" data-number="6.5.1">
<h3>
<a href="#uid366" class="heading hyperref"><span class="number">6.5.1 </span>Lemons into Lemonade – Getting Feedback After the “No” During a Job Search</a>
</h3>
<p class="noindent">
You’ve been searching hard.<span class="intersentencespace"></span> You’ve done multiple interviews during the course of your job search and possibly have gotten a couple of job offers.<span class="intersentencespace"></span> But when someone rejects you it can still taste like you’ve swallowed a lemon.
</p>
<p>
My mom always told me to turn “lemons into lemonade.”<span class="intersentencespace"></span> Yeah right, there are few things that feel worse than a job rejection I can hear you saying.
</p>
<div id="uid367" data-tralics-id="uid367" class="subsubsection" data-number="6.5.1.1">
<h4>
<a href="#uid367" class="heading">But all is not lost</a>
</h4>
<p class="noindent">
You can still make the most of the rejection if you implement the following steps during your job search.<span class="intersentencespace"></span> I give you a full script at the end of this post to use for your own purposes, but first I want to walk you through why we’re doing what we’re doing.
</p>
</div>
<div id="uid368" data-tralics-id="uid368" class="subsubsection" data-number="6.5.1.2">
<h4>
<a href="#uid368" class="heading">Step 1 – Say Thank You & Keep Doors Open</a>
</h4>
<p class="noindent">
Don’t pout.<span class="intersentencespace"></span> Don’t whine.<span class="intersentencespace"></span> These are things my parents used to say and their words would serve you well here.<span class="intersentencespace"></span> I like to say thank you for their consideration.<span class="intersentencespace"></span> The high road is always a winning road.
</p>
</div>
<div id="uid369" data-tralics-id="uid369" class="subsubsection" data-number="6.5.1.3">
<h4>
<a href="#uid369" class="heading">Step 2 – Asking For Feedback After Thanking Them</a>
</h4>
<p class="noindent">
After saying “thank you”, then I like to ask them for feedback.<span class="intersentencespace"></span> But there is an important thing to do when you ask…
</p><div3 id="uid370" data-tralics-id="uid370" data-number="">Reassure you’re not going to rationalize or argue</p>
<p>
One reason companies don’t like to send feedback (besides the fact it can open them up to legal trouble) is that they’re afraid candidates will get defensive and start arguing about why they should be hired.<span class="intersentencespace"></span> Fortunately, you’re not going to do this, because you’re of a higher caliber (though it’s perfectly understandable if you want to…I know I wanted to at times 🙂 ).
</p></div3> <div3 id="uid371" data-tralics-id="uid371" data-number="">Say thank you for the feedback</p>
<p>
And if they are kind enough to give you the feedback, I always follow up with a one line thank you to let them acknowledge that I got it and I’m grateful.
</p></div3>
</div>
<div id="uid372" data-tralics-id="uid372" class="subsubsection" data-number="6.5.1.4">
<h4>
<a href="#uid372" class="heading">Step 3 – The script template for your own use</a>
</h4>
<p class="noindent">
Below is the script I use in response to an email rejection from a hiring manager.<span class="intersentencespace"></span> Feel free to adapt it using your own style of speaking.
</p>
<p>
*Dear [Name of Hiring Manager],
</p>
<p>
Thank you for letting me know.<span class="intersentencespace"></span> I wish you and [Company of Hiring Manager] the best.
</p>
<p>
PS – If you wouldn’t mind, I would greatly appreciate it if you could offer some criticism on the way I have presented myself, skills you felt I was lacking that the position called for, or things that may have disqualified me.<span class="intersentencespace"></span> Please understand that I’m asking for help here, not trying to rationalize or rehash my case.<span class="intersentencespace"></span> I’m just trying to make myself into a stronger candidate for the future.
</p>
<p>
Best of luck to you and [Company of Hiring Manager]!
</p>
<p>
Sincerely,
</p> [Your Name]*</p>
</div>
<div id="uid373" data-tralics-id="uid373" class="subsubsection" data-number="6.5.1.5">
<h4>
<a href="#uid373" class="heading">Step 4 – The script for a simple thank you after you’ve gotten the specific feedback</a>
</h4>
<p class="noindent">
*Dear [Name of Hiring Manager],
</p>
<p>
Thank you for the specific feedback!<span class="intersentencespace"></span> I wish you and [Company of Hiring Manager] the best.
</p>
<p>
Sincerely,
</p> [Your Name]*</p>
</div>
<div id="uid374" data-tralics-id="uid374" class="subsubsection" data-number="6.5.1.6">
<h4>
<a href="#uid374" class="heading">My own results</a>
</h4>
<p class="noindent">
I would say in a majority of the cases where I’ve done this (and I’ve gotten to at least the second interview with a technical hiring manager), I’ve gotten very specific feedback on what to improve or areas to focus on.<span class="intersentencespace"></span> It’s been helpful in shaping whether or not I decide to change jobs or what types of roles I’d like to take on next.
</p>
<p>
So try asking for feedback the next time you’re rejected.<span class="intersentencespace"></span> You might be pleasantly surprised at how you turned lemons into lemonade.
</p>
</div>
</div>
<div id="uid375" data-tralics-id="uid375" class="subsection" data-number="6.5.2">
<h3>
<a href="#uid375" class="heading hyperref"><span class="number">6.5.2 </span>Tracking your effectiveness as a candidate</a>
</h3>
<p class="noindent">
One thing that helped me initially was tracking the state of where I was in the job interview process.<span class="intersentencespace"></span> By having this historical data, it let me see how much I was improving year after year.
</p>
<p>
How many jobs should you apply to?<span class="intersentencespace"></span> If you’re starting out, and you have no idea, it’s tempting to try and blast your resume out through various online sites and going through recruiters.<span class="intersentencespace"></span> In fact, I think I found my first job through a recruiter.
</p>
<p>
My own suggestion is to not blast but try and apply to jobs that would be a great fit and make sure you track the results.<span class="intersentencespace"></span> Track according to how far you get into the interview process.<span class="intersentencespace"></span> In other words, track whether you even got an initial phone screen, technical screen, and on-site interview.
</p>
<p>
Once you do get offer letters, record that so that the next time you go through the process, you’ll have a number of how many jobs you had to apply to in order to get an offer letter(s).
</p>
</div>
<div id="uid376" data-tralics-id="uid376" class="subsection" data-number="6.5.3">
<h3>
<a href="#uid376" class="heading hyperref"><span class="number">6.5.3 </span>Why You Must Keep Hustling Until You Have An Offer Letter</a>
</h3>
<p class="noindent">
One thing I’ve noticed with myself and other friends I know who have applied to jobs and then face a rejection – it’s very easy to get discouraged.<span class="intersentencespace"></span> Let’s face it, a rejection can feel like someone telling you “you’re not worth it”.<span class="intersentencespace"></span> There are of course many reasons why you may not get hired that are behind the scenes that you may never know about it.
</p>
<p>
It could be that the boss’s nephew needed a job.<span class="intersentencespace"></span> It could be a more experienced candidate who was willing to work for less pay came along (H1-B visas anyone?).
</p>
<p>
This is why you need to keep hustling until you have an offer letter (or 2 or 3).<span class="intersentencespace"></span> I noticed that when I still had other companies in the pipeline, it became much easier to focus on future opportunties rather than the rejection itself.
</p>
<p>
It’s a psychology thing.<span class="intersentencespace"></span> So keep hustling.
</p>
</div>
<p class="noindent">
One of the last finishing touches you can put on your portfolio is to have the code reviewed by someone with more experience in the field.<span class="intersentencespace"></span> If you know a good senior engineer from all those local meetups you’ve been attending, you can ask them.
</p>
<p>
There are things I’ve learned from other senior engineers that made a difference in the way I write code that I couldn’t have learned in any other way.
</p>
<p class="noindent">
Get a friend or other 3rd party (say a front end or back end engineer) to review your resume, especially for typos.<span class="intersentencespace"></span> <a href="http://blog.alinelerner.com/lessons-from-a-years-worth-of-hiring-data/" target="_blank" rel="noopener">Alie Lerner wrote a post</a> showing that typos in your resume mattered more than any other factor when it comes to hiring.
</p>
<p>
Also, don’t forget to line up 3 professional references before getting the offer letter.<span class="intersentencespace"></span> While in my experience, most startups I’ve worked at don’t seem to bother with reference checking since it’s so antiquated, it has happened to me on occasion, especially when applying to larger companies.
</p>
<ul>
<li>
see the Bonuses in <a href="#cha-bonuses_experience" class="hyperref">Chapter <span class="undefined_ref">cha:bonuses_experience</span></a>
</li>
</ul>
<p class="noindent">
So I made this portion of the guide to give you shortcuts to good resources that will help you on your job search.<span class="intersentencespace"></span> It’s done by chapter.
</p>
<p>
Another Note: Some of the links throughout this section are affiliate links for which I may get paid or get referral credit, however, I only share things I personally use (or have used) and recommend.
</p>
<div id="uid378" data-tralics-id="uid378" class="subsection" data-number="7.1.1">
<h3>
<a href="#uid378" class="heading hyperref"><span class="number">7.1.1 </span>Ultimate Portfolio Checklist</a>
</h3>
<p class="noindent">
This is a checklist to help you ensure you have a great portfolio to show off!
</p>
<ol>
<li>
Testimonials – You have collected 3rd party proof to show how great you are to work with using the questions provided in Chapter 2?<span class="intersentencespace"></span>
</li>
<li>
Projects – You have projects that show you are a good fit
</li>
<li>
Proof that that you’re capable of learning on the job – Are any of your projects using the latest web technology?<span class="intersentencespace"></span>
</li>
<li>
Show as much depth as you can in the area you’re applying for – Have you read up on the idiomatic constructs of your programming language of your choice?<span class="intersentencespace"></span>
</li>
<li>
Adopt the Google <a href="https://developers.google.com/speed/pagespeed/insights/" target="_blank" rel="noopener">PageSpeed Insights</a> recommendations and try to get your score up to 90% for both mobile and desktop.<span class="intersentencespace"></span>
</li>
<li>
Make your portfolio easy to navigate – Keep in mind a hiring manager has limited time to browse your portfolio.<span class="intersentencespace"></span> So make it easy to navigate (on mobile and desktop).<span class="intersentencespace"></span>
</li>
<li>
Your site looks good on a mobile device?<span class="intersentencespace"></span>
</li>
<li>
Great UI elements and design?<span class="intersentencespace"></span>
</li>
<li>
MVP Portfolio with 6-8 projects?<span class="intersentencespace"></span>
</li>
<li>
Focused projects in your portfolio that match your specialization?<span class="intersentencespace"></span>
</li>
<li>
Blogging – As if all the above is not enough work, I also advise people to start blogging about what they learn.<span class="intersentencespace"></span> For people with full-time jobs who are learning to code for the first time, I realize this can sound onerous.<span class="intersentencespace"></span> But blogging about you learn can be a great strategy.<span class="intersentencespace"></span> If you’re time crunched, one idea is to document what you’re learning a little bit at a time, and then polish it up into a blog post.<span class="intersentencespace"></span>
</li>
</ol>
</div>
<div id="uid390" data-tralics-id="uid390" class="subsection" data-number="7.1.2">
<h3>
<a href="#uid390" class="heading hyperref"><span class="number">7.1.2 </span>Technical Resources for Constructing a Portfolio</a>
</h3>
<ul>
<li>
<a href="http://bit.ly/2qC5xDD" target="_blank" rel="noopener">Namecheap</a> – With Namecheap you can register domain names for your portfolio such as “mary-has-an-awesome-portfolio.com”.<span class="intersentencespace"></span> I’ve been using them for years and have been quite happy.<span class="intersentencespace"></span>
</li>
<li>
<a href="http://bit.ly/2E6bLgK" target="_blank" rel="noopener">Digital Ocean</a> – I use Digital Ocean to host <a href="http://www.binarywebpark.com/" target="_blank" rel="noopener">my blog</a>.<span class="intersentencespace"></span> It’s pretty friendly for developers.<span class="intersentencespace"></span> If you just need a low-cost portfolio, I recommend using GitHub pages which I cover in <a href="#sec-github_pages" class="hyperref">Chapter <span class="ref">1.8</span></a>.<span class="intersentencespace"></span>
</li>
</ul>
</div>
<p class="noindent">
One of the things that a lot people new to the industry complain about is the extensive interviewing process.<span class="intersentencespace"></span> Below is a list of resources that you will find helpful.
</p>
<p>
I broke it out into 2 sections.<span class="intersentencespace"></span> One is “coding interview preparation” and the other is “practical preparation”.<span class="intersentencespace"></span> Coding interview preparation is for questions like “write the Big O notation for this algorithm” or “describe what happens when you type google.com in the browser.”<span class="intersentencespace"></span> The other section is for links to sites that give you practical skills like “learn how to build a web application with React” or “how to refactor your code”.
</p>
<div id="uid393" data-tralics-id="uid393" class="subsection" data-number="7.2.1">
<h3>
<a href="#uid393" class="heading hyperref"><span class="number">7.2.1 </span>Coding Interview Preparation (Whiteboarding)</a>
</h3>
<ul>
<li>
<a href="https://github.com/h5bp/Front-end-Developer-Interview-Questions" target="_blank" rel="noopener">Front end interview questions</a>
</li>
<li>
<a href="https://github.com/arialdomartini/Back-End-Developer-Interview-Questions" target="_blank" rel="noopener">Back end interview questions</a>
</li>
<li>
Coding practice resources <a href="#sec-coding_challenge" class="hyperref"><span class="ref">2.2.4</span></a>
</li>
</ul>
</div>
<div id="uid397" data-tralics-id="uid397" class="subsection" data-number="7.2.2">
<h3>
<a href="#uid397" class="heading hyperref"><span class="number">7.2.2 </span>Practical Preparation (Skills You’ll Find Useful Day to Day)</a>
</h3>
<ul>
<li>
<a href="http://bit.ly/2CP2E8f" target="_blank" rel="noopener">Upcase</a> – I really like Upcase because they not only have weekly videos that cover things you might like to know as a software developer such as “Testing Interaction with 3rd Party APIs” or “Optimizing SQL Queries in Postgres”.<span class="intersentencespace"></span> They also have courses in particular subject areas such as Vim.<span class="intersentencespace"></span> Because it’s owned and operated by Thoughtbot, a Ruby on Rails consultancy, they tend to cover topics related to Ruby and Rails although they are starting to diversify.<span class="intersentencespace"></span>
</li>
<li>
<a href="http://bit.ly/2nilKJ2" target="_blank" rel="noopener">Egghead.io</a> – Egghead is great because they have high quality content on front end topics such as React and Webpack.<span class="intersentencespace"></span> They often have courses taught by the creators of the frontend tools and frameworks.<span class="intersentencespace"></span> For instance, Dan Abramov, the creator of Redux, has a <a href="http://bit.ly/2nilKJ2" target="_blank" rel="noopener">course on there</a> called getting started with Redux.<span class="intersentencespace"></span>
</li>
</ul>
</div>
<p class="noindent">
One of the hardest things about starting out is that everyone seems to want experienced job candidates but it’s hard to get experience without a job.
</p>
<ul>
<li>
Here’s a <a href="https://github.com/ashedryden/freelance-contract" target="_blank" rel="noopener">free contract template for freelancers</a>.<span class="intersentencespace"></span>
</li>
<li>
<a href="https://devchat.tv/freelancers" target="_blank" rel="noopener">Freelancers’ Show</a> – This is a great podcast that talks about the various aspects of freelancing and because of the host’s roots as a freelance software developer, it has a technical bent to it.<span class="intersentencespace"></span>
</li>
<li>
<a href="http://bit.ly/2CVUR5n" target="_blank" rel="noopener">Freshbooks</a> – This handy web application lets you track your time and easily bill your clients.<span class="intersentencespace"></span>
</li>
<li>
<a href="http://bit.ly/2E7C5XU" target="_blank" rel="noopener">Trello</a> – Trello is a user-friendly project management tool.<span class="intersentencespace"></span> I actually use this to manage my personal projects, but I have used it a bit for managing client projects if memory serves correctly.<span class="intersentencespace"></span> I have also used <a href="https://basecamp.com/" target="_blank" rel="noopener">Basecamp</a> as well and that’s another good project management tool.<span class="intersentencespace"></span> In reality, there are dozens out there, so you should just pick one to start and change if needed as you keep on freelancing.<span class="intersentencespace"></span>
</li>
</ul>
