BinaryWebPark

Common Gotchas For Elixir Newbies

Bruce Park — Tue, 26 Jun 2018 06:00:11 +0000

Common Gotchas For Elixir Newbies

Elixir was my first functional programming language (unless you count JavaScript). Mostly, my experience was with object-oriented languages like Ruby (and a bit of C++ and Java back in the day).

So when I started Elixir, there were new concepts that I ran into as I was writing code that produced unexpected results. Here is my attempt to recall all the gotchas I ran into.

Gotcha 1 – Pattern matching – top down order

One of the first exciting concepts I ran into was pattern matching in Elixir. Basically, pattern matching means you call the function that “matches” both the shape of the data structure and/or the value of the arguments you pass in.

What I didn’t realize was that Elixir executes pattern matching from the top down. Let’s take a look at some code.

defmodule M do
  def m(x), do: "hello #{x}"
  def m(nil), do: "found nil"
  def m(%{a: "hello"} = t), do: "found #{Map.get(t, :a)}"
end

What do you think calling M.m(nil) does? Below is the result.

M.m(nil)
#=> returns "hello " instead of "found nil"

What happened? Well Elixir matched the “nil” on the “x” variable in m(x) first, so it executed that function.

Now if I swap the order of m(x) and m(nil), my expectations are met.

defmodule M do
  def m(nil), do: "found nil"
  def m(x), do: "hello #{x}"
  def m(%{a: "hello"} = t), do: "found #{Map.get(t, :a)}"
end

Finally, I get “found nil”.

M.m(nil)
#=> returns "found nil"

Gotcha 2 – The double backslash in function parameters

When I first got to Elixir, I noticed functions like this:

defmodule M do
  def default(x \\ 2), do: x + 4
end

What are those double backslashes? As it turns out, they specify default values for arguments.

iex(5)> M.default
#=> returns 6
iex(6)> M.default(3)
#=> returns 7

Gotcha 3 – Piping to an anonymous function

Below I’m passing a list into Enum.any/2 and checking if any of the values are equal to 3.

You’ll notice I’m using the “&” operator to define an anonymous function to check equality on the values. If we were to expand that function it would read fn(x) -> x end.

[2,3]
|> Enum.any?(&(&1 == 3))

Gotcha 4 – Piping an argument that is not the first argument to a function embedded as an anonymous function argument

When you want to pipe an argument that is not the first argument to a function embedded as an anonymous function argument, you have to use the capture (“&”) operator.

Here is the module M redefined.

defmodule M do
  def mdiv(x, y), do: x / y
end

Suppose we want to map over “M.mdiv”. Since Enum.map/2 takes 2 arguments, one a list and the other an anonymous function, we use the capture operator as follows.

[2, 2]
|> Enum.map(&(M.mdiv(3, &1)))
#=> [1.5, 1.5]

Gotcha 5 – Piping an argument that is not the first argument to a function

I talked about this in The Elixir Pipe and Capture Operators in Case 2: Piping an argument that is not the first argument to another function, but I think it’s worth reiterating.

defmodule M do
  def mdiv(x, y), do: x / y
end
2
|> (&(M.mdiv(3, &1))).()
1.5

You’ll notice that if you don’t put the “.()” at the end of the function call, you’ll get an error message like this:

** (ArgumentError) cannot pipe 2 into &(M.mdiv(3, &1)), can only pipe into local calls foo(), remote calls Foo.bar() or anonymous functions calls foo.()
    (elixir) lib/macro.ex:118: Macro.pipe/3
    (stdlib) lists.erl:1263: :lists.foldl/3
    (elixir) expanding macro: Kernel.|>/2
    iex:4: (file)

Gotcha 6 – Nested case smells

I wrote about using the with statement to deal with the nested case smell but it’s worth bringing up the nested case as a gotcha.

defmodule Airplane do
  def undo_jet_engine_start(params) do
    case get_engine_part_by_diameter(params["diameter"]) do
      {:ok, engine} ->
        changeset = Engine.engine_changeset(engine,
        %{
           is_turbine_engine: false,
         })
        case Repo.update(changeset) do
          {:ok, t} ->
            {:ok, t}
          {:error, changeset} ->
            {:error, changeset}
        end
      {:error, error} -> {:error, error}
    end
  end
  def get_engine_part_by_diameter(diameter), do: {:ok, "demo"}
end

As I said in the post on untangling nested case using the with statement, using nested case makes it harder to read your code and hence, harder to debug and maintain. You can dig yourself out of the nested case pattern with a “with statement”.

Gotcha 7 – Using cond instead of pattern matching or case

When I was making nested_filter, I was pretty new to Elixir and still getting the hang of things.

I wrote a function like this:

defp is_nested_map?(map) do
  cond do
    is_map(map) ->
      map
      |> Enum.any?(fn{key, _} -> is_map(map[key]) end)
    true ->
      false
  end
end

Thanks to scohen’s comment on this issue of nested_filter, I learned that pattern matching is in generally preferable to using a “cond” statement. Also, using a case statement might be more preferable as well.

Gotcha 8 – No custom functions in guards

This is something you can end up learning the hard way. I talk about this in detail in the section “Why You Can’t Use Custom Functions With Guards” of the Ultimate Guide to Elixir.

Here’s an example of a function with a guard clause:

defmodule M do
  def print_list(list) when is_list(list), do: IO.inspect list
end

You’ll notice the is_list/1 function is a built-in function. Basically, we’ll only call print_list/1 when the argument passed to it is a list. Due to Elixir’s rules, you cannot have your own custom (i.e., you can’t use a non-built-in function) function as part of the guard clause.

Gotcha 9 – You don’t assign, you bind

One item of note that might seem rather pedantic, but when you see an expression such as the following, you are doing something called “binding”.

x = 2

This is actually a case of a successful pattern match.

As this poster says in the Elixir forum¹ states:

The compiler/runtime has a set of rules that it uses to attempt to make the pattern match succeed. One of these is “binding” and “re-binding”. Binding creates a variable that references a term in memory, if that variable does not already exist in the current scope. In Erlang, all further uses of that variable in it’s current scope are fixed to that term in memory. Elixir cheats a bit and allows you to “re-bind”[2] a variable to a new term in memory in certain situations, however the actual term in memory from the original binding does not change and will need to be garbage collected at some point.

As a side note, the Platformatec blog has an interesting article on comparing Elixir and Erlang variables and talks a bit about the concept of “rebinding”.

Gotcha 10 – A for is a comprehension, not a loop

If you’re an object-oriented programmer with a background in something like Java, Ruby, C++, or JavaScript, you might see something like the below and think you’ve discovered a “for loop” in Elixir.

for x <- [6, 7, 8], do: 2*x

Nothing could be further from the truth. As I discuss in the comprehensions section of the Ultimate Elixir Guide, comprehensions are basically “syntactic sugar” for iterating over a list and tranforming the data in that list to something else.

Footnotes

Source: https://elixirforum.com/t/whats-the-difference-between-variable-binding-and-assignment/4971/3 ↩

The post Common Gotchas For Elixir Newbies appeared first on BinaryWebPark.

Storing JSON Blobs in Amazon S3 With Elixir

Bruce Park — Tue, 29 May 2018 06:00:08 +0000

Storing JSON Blobs in Amazon S3 With Elixir

The idea for this project of using S3 with Elixir came from an actual project and a blog post I stumbled on.

I was working on a Ruby on Rails application with millions of rows of data quite a while ago. We would often pull reports from this data and since it was on the Heroku platform, we would often see these warning messages in our slack monitoring channel about memory consumption being over 100%.

We were worried that we wouldn’t be able to sustain this approach anymore, and so we wanted to start archiving the data that didn’t need to be used in real time anymore. I found this great post on the moz blog about how they essentially used a cold storage solution in Amazon S3 buckets (and here, I assume they mean they used something similar to a nested json data file based on their description).

JSON Blob Experiment

This led me to start experimenting with storing json files (let’s call them “json blobs”) on Amazon S3 with Elixir. This followed the approach from Moz described in the aforementioned blog post as well as allowing me to play with Elixir.

Here is a 3 step approach I used to have an Elixir project store json blobs on S3.

Note: At the time I created this, Phoenix 1.2 was the current version. I’m updating the commands to use phoenix 1.3, although the structure of the code may resemble Phoenix 1.2.

Step 1: Create Mix Project with ex_aws

First, I generated a new Phoenix project.

mix phx.new json_blobber

In the mix.exs file, I also added the ex_aws package as a dependency for storing files in Amazon S3 as shown below.

# Type `mix help deps` for examples and options.
defp deps do
  [{:phoenix, "~> 1.3.0-rc"},
   {:phoenix_pubsub, "~> 1.0"},
   {:phoenix_ecto, "~> 3.2"},
   {:postgrex, ">= 0.0.0"},
   {:phoenix_html, "~> 2.6"},
   {:phoenix_live_reload, "~> 1.0", only: :dev},
   {:gettext, "~> 0.11"},
   {:ex_aws, "~> 1.1"},
   {:sweet_xml, "~> 0.6"},
   {:hackney, "~> 1.7"},
   {:poison, "~> 3.1"},
   {:cowboy, "~> 1.0"}]
end

Step 2: Module to Generate the JSON records

The next step was to create a JsonGenerator module. This module simply generated the “json blobs” I wanted to store on S3 as shown below.

defmodule JsonGenerator do
  def generate_records(n) do
    for x <- 1..n do
      json_record
    end
    |> Poison.encode!
  end

  def json_record do
    %{video_id: :rand.uniform(200000), snapshot_id: :rand.uniform(56000), view_count: :rand.uniform(50000), comment_count: :rand.uniform(500), like_count: :rand.uniform(150), dislike_count: nil, share_count: :rand.uniform(400), created_at: random_date_string, updated_at: random_date_string, status: "fetched"}
  end

  defp random_date_string do
    [year, month, day, hours, minutes, seconds] =
      [Enum.random(1900..2020), Enum.random(1..12), Enum.random(1..28),
       Enum.random(0..24), Enum.random(0..59), Enum.random(0..59)]
      |> Enum.map(fn(e) -> e
                  |> Integer.to_string
                  |> String.pad_leading(2, "0")
                  end)
    "#{year}-#{month}-#{day} #{hours}:#{minutes}:#{seconds}"
  end
end

Step 3: Module to Write to AWS

To hew to the “separation of concerns” principle, I created another module specifically to write to AWS. Using Elixir’s import statement, I imported the JsonGenerator module to use the json blob generating functionality I created in Step 2.

The API for the JsonAws module is simple. The write_records method writes a user-specified number of json blobs up to S3 using the configured S3 bucket. The read_file method then reads the file that stores the json blobs.

defmodule JsonAws do
  @s3_bucket Application.get_env(:ex_aws, :s3_bucket)

  import ExAws
  import JsonGenerator

  def write_records(n) do
    n
    |> generate_records
    |> (&ExAws.S3.put_object(@s3_bucket, "json_file.txt", &1)).()
    |> ExAws.request!
  end

  def read_file(file \\ "json_file.txt") do
    {status, data} = file
                     |> (&ExAws.S3.get_object(@s3_bucket, &1)).()
                     |> ExAws.request!
                     |> parse_json
  end

  defp parse_json(%{body: body, headers: headers, status_code: 200}) do
    body
    |> Poison.decode
  end
end

Step 4: Set Up Your AWS Keys

One of the last few steps is to configure ex_aws. You can simply copy the config.exs file below.

In config.exs:

config :ex_aws,
  access_key_id: [{:system, "AWS_ACCESS_KEY_ID"}, :instance_role],
  secret_access_key: [{:system, "AWS_SECRET_ACCESS_KEY"}, :instance_role],
  region: System.get_env("AWS_DEFAULT_REGION"),
  s3_bucket: System.get_env("S3_BUCKET")

To make this all work, you’ll have to setup your AWS keys in your Amazon account and then put those values in a .env file in the top level of your application.

Set up a .env file as follows:

export AWS_ACCESS_KEY_ID=yyy
export AWS_SECRET_ACCESS_KEY=yyy
export AWS_DEFAULT_REGION=us-east-24
export S3_BUCKET=yyy

You get these values from the Amazon AWS management console. You may have to sign up for an account if you don’t have one.

Step 5: Run Your New Program

Finally, boot up an iex session as follows and run write_records method specifying the number of json records you want to create and store in S3.

$ iex -S mix
iex(1)> JsonAws.write_records(10)

Summary

Boom! And that’s all there is to storing simple json data on S3. It’s a good way to get your feet in Elixir.

The post Storing JSON Blobs in Amazon S3 With Elixir appeared first on BinaryWebPark.

Untangling Nested Case Statements Using The With Statement in Elixir

Bruce Park — Tue, 24 Apr 2018 06:00:29 +0000

Untangling Nested Case Statements Using Elixir’s With Statement

I love spaghetti and meatballs. And when I first heard the term spaghetti code, it sounded tasty. Alas, it’s a pejorative phrase for code that is messy and overly complicated. If you write spaghetti code, no one will want to hire you.

That’s true in any language, including Elixir.

One way to introduce spaghetti code into your Elixir code base is with a nested case statement.

What is a nested case statement?

Below is a simple example of a double nested case statement. Don’t worry too much about making sense of the higher level context about what this code is doing. I took some actual production code from a project and altered it for educational purposes. Instead, if you need a higher level context, pretend we’re simply setting the is_snow_tire property to a boolean value based on the diameter property of a tire.

The whole point is to focus on the nested case aspect of this code.

It’s not too hard to reason about, but I still find myself stopping to wonder what the difference between the two error return clauses are and if they are actually doing anything different.

defmodule Car do
  def undo_snow_tire(params) do
    case get_tire_by_diameter(params["diameter"]) do
      {:ok, tire} ->
        changeset = Tire.tire_changeset(tire,
        %{
            is_snow_tire: false,
          })
        case Repo.update(changeset) do
          {:ok, t} ->
            {:ok, t}
          {:error, changeset} ->
            {:error, changeset}
        end
      {:error, error} -> {:error, error}
    end
  end
  def get_tire_by_diameter(diameter), do: {:ok, "demo"}
end

Looking at the actual code upon which this was based off of, it actually doesn’t matter what the second element of the return error tuple is (I’m asking you to take my word for it in this instance as I don’t want to clutter up this post with more code that is not related to the concept we’re discussing).

So, what is wrong with a nested case statement?

I would argue there are 3 things wrong with it.

Point 1 – Readability

A nested case statement is simply not as readable as relying on pattern matching or using a with statement (coming later in this post). It’s harder for new developers coming into your team to understand your code base and make changes to it.

Point 2 – Maintainability and Adding New Features

The more you have to stop and think about what your code is doing, the harder it is to debug effectively and promptly. It’s also harder to add new features.

You want to be able to build a great product and have an easy time maintaining it. This will help you win against your competitors against the marketplace.

An extreme example for clarity

In case (pardon the pun) you didn’t believe the above example, here is an example of a nested case statement from a user in the elixir forum. I changed some of the variable names, but hopefully you can see my point about nested case statements.¹

defmodule DemoModule do
  def start_or_resume_user_session(session_id) when is_bitstring(session_id) do
    case User.Supervisor.start_expression({"session", "global_id"}) do
      {:ok, root_session} ->
        case get_user_session(session_id) do
          {:ok, user_session} ->
            case get_latest_user_session_global_id(session_id, root_session) do
              # I want to do stuff if it's nil
              {:ok, nil} ->
                case (root_session |> instance(user_session)) do
                  {:ok, {_, session}} ->
                    case session |> get_user_info do
                      {:ok, session_info} ->
                        case get_ib_global_id(session_info) do
                          {:ok, user_session_global_id} -> {:ok, user_session_global_id}
                          {:error, reason} -> {:error, reason}
                        end
                      {:error, reason} -> {:error, reason}
                    end
                  {:error, reason} -> {:error, reason}
                end
              # Return it if not nil
              {:ok, existing_user_session_global_id} -> {:ok, existing_user_session_global_id}
              {:error, reason} -> {:error, reason}
            end
          {:error, reason} -> {:error, reason}
        end
      {:error, reason} -> {:error, reason}
    end
  end
end

Notice how much harder this makes the code to read.

So what is is one to do? One solution is the with statement.

Syntax of a with statement

Let’s look at rewriting the double nested case statement using a with statement.

defmodule Car do
  def undo_snow_tire(params) do
    with {:ok, tire} <- get_tire_by_diameter(params["diameter"]),
         {:ok, tire} <- Repo.update(Tire.changeset_for_update(tire, %{is_snow_tire: false})) do
      {:ok, tire}
    else
      {:error, error} -> {:error, error}
    end
  end
  def get_tire_by_diameter(diameter), do: {:ok, "demo"}
end

So the great thing about the with statement is that it lets you say “each intermediate result must match each pattern to the left of the “<-“ to execute the code in the with/do block, otherwise proceed to else”. Notice that your eye now can scan each statement to check what must match much more easily than it can with a nested case statement.

Advantages to using with

Advantage 1 – In our specific example, we must pattern match on the {:ok, tire} tuple for each function call. If a function should pattern match on a one element tuple like {:ok} instead, you can specify that too. Thus, the pattern match is very flexible.
Advantage 2 – You get can handle the same conditions as a nested case but with more concise code.
Advantage 3 – The with statement is an alternative way to do pattern matching on results and doing error handling. I almost think of it as an alternative to railway-oriented programming.

A Word on Elixir versions

Now this fellow named Scott notes that it’s not until Elixir 1.3 that you can use an else block in a with statement². In Elixir 1.2, you only get the with/do block only.

Summary

I love spaghetti, but not in my code. Hopefully, this example of using the with statement will help you keep your codebase tidy too!

Footnotes

The post Untangling Nested Case Statements Using The With Statement in Elixir appeared first on BinaryWebPark.

The Best Blog Posts for a Rubyist Learning Elixir

Bruce Park — Tue, 27 Mar 2018 06:00:56 +0000

The Best Resources and Blog Posts for Learning Elixir (for Rubyists)

Last updated: 5/13/17

While trying to learn Elixir, I came across some great resources. So this is a collection of curated blog posts, videos and books that I found really helpful. Enjoy!

Philosophy

https://zeroclarkthirty.com/2015-11-01-elixir-is-not-ruby.html
http://theerlangelist.com/article/why_elixir
https://medium.com/@kenmazaika/why-im-betting-on-elixir-7c8f847b58 – “The fact that WebSockets, processes, and concurrency in Phoenix and Elixir are cheap, without sacrificing developer happiness is an absolute game-changer.”
https://www.youtube.com/watch?v=B4rOG9Bc65Q – Idioms for Building Distributed Fault-tolerant Applications with Elixir * José Valim – good historical overview

Interviews with Jose Valim

https://www.sitepoint.com/an-interview-with-elixir-creator-jose-valim/

Basic Syntax

https://elixirschool.com/lessons/basics/pattern-matching/

Tutorials

Supervisors

Processes

Performance

Books

Other Resources

https://github.com/h4cc/awesome-elixir

The post The Best Blog Posts for a Rubyist Learning Elixir appeared first on BinaryWebPark.

Basic Linux Commands – Part 1

Bruce Park — Tue, 27 Feb 2018 06:00:53 +0000

Basic Linux Commands – Part 1

One of the things that I think helps new developers become more efficient is learning all the basic linux commands available to them. Being self-taught, I came from using a graphical user interface to extract any system information as well as navigate around the computer.

One of the things I learned is how much more quickly you can move if you’re able to be fluent with Linux terminal commands and shortcuts. This post introduces some of the basic linux commands and what they do.

I’ve broken it out into sections based on what each command does.

History & Date

1: history – The history command shows you all the commands you’ve previously issued. History also takes a numerical argument to show you the last “n” number of commands you issued. Hence, history 5 shows you the last 5 commands.

2: date – The date command prints the current date and time to the terminal.

3: cal – This cool command prints out the calendar to your window.

4: df – df displays the free disk space available on your system.

Navigations

5: pwd – This prints out the full path of the directory you are currently in.

6: cd – The cd command lets you change directories. Note it takes some arguments that can make your life easier.

a. cd – The dash after cd means to return to the last directory you were at.
b. cd .. The dot means go up one directory from the current directory.

Exploring the system

7: ls – This lists the contents of the current directory.

a. ls -a – I like passing the -a argument because you get to see all the directory entries that begin with a dot (e.g., .git).

8: file – This tells you what type of file something is. For example if I type file sample.rb (where sample.rb is a Ruby program), I get the following output:

sample.rb: ASCII text

9: less – Less is a handy utility for viewing large files. With larger input files, it can start up faster than a vi editor since it does not have to read the entire input file before starting.

10: symbolic links – A symbolic link is a special type of link that points to another file. Think of it as a Windows shortcut or alias. The syntax is ln -s source_file target_file.

Manipulating files and directories

11: cp – The copy command allows you to make copies of files. The syntax is cp file1 copy_of_file1.

12: mv – You can use this command to rename a file by doing mv file1_name file1_newname. You can also use it to move a file to another directory.

13: mkdir – This command is used to make a directory. Try mkdir new_directory.

14: rm – Be careful with this command as it lets you delete files.

Some more helpful terminal bits

15: man – This command lets you get descriptive help about any command. For example, if you type man less you will get a description of the less command and the arguments it takes.

16: tree utility – This is not a command, but more of a utility. It prints out the directory structure to your terminal as in the below. You can install it in MacOSx via a package manager like Homebrew or in Ubuntu via sudo apt-get install tree if it’s not on your system. It’s very helpful for visualizing your directory structure.

├── 30-days-of-elixir
│   ├── 01-hello-world.exs
│   ├── 02-unit-testing.exs
│   ├── 03-input-output.exs
│   ├── 03-pattern-matching-guards.exs
│   ├── 04-list.exs
│   ├── 05-map.exs
│   ├── 06-record.exs
│   ├── 07-fibonacci.exs
│   ├── 08-process-ring.exs
│   ├── 09-ping.exs

17: z utility – This is a cool utility that I found here. It lets you jump around to directories by allowing you type strings that closely match. For example, if I wanted to go to a directory called “elixir_rocks”, I might type z elixir. It’s really sped up my ability to navigate in between directories.

Summary

I hope you found these basic Linux commands helpful. Being more efficient on the command line can help you become a more productive programmer.

The post Basic Linux Commands – Part 1 appeared first on BinaryWebPark.

The Ultimate Strategy For Creating a Portfolio That Says “Hire Me”

Bruce Park — Tue, 30 Jan 2018 19:00:13 +0000

The Ultimate Strategy For Creating a Portfolio That Says “Hire Me”

A Guide for New Web Developers

Bruce Park

Preface
- 1 Learning in layers…
Chapter 1 How To Make a Portfolio That Will Make Interviewers Want To Setup a Time To Meet You
Chapter 2 What Skills To Focus On So That You Come Across as the Best Job Candidate
Chapter 3 How Do You Get a Job That Requires Experience When You Have No Experience?
Chapter 4 Cultivating Job Leads: How to Network When You’re Starting Out
Chapter 5 Presenting Yourself As the Best Candidate For the Position
Chapter 6 How to Prepare for An Interview So You Look Like the Best Job Candidate
Chapter 7 Bonuses To Help You Get That Job

Preface

1 Learning in layers…

I started out doing web development on the weekends while I was working a day job as an engineer. Eventually, I quit my job and decided to go into web development full-time.

This guide is a culmination of the experience I’ve gained on my way to becoming a self-taught software engineer. It’s meant to help new coders break into the wild industry we call tech.

I hope you enjoy the guide and please don’t hesitate to contact me with any questions or any issue at all at bruce@binarywebpark.com.

May the 1’s and 0’s be with you,

Bruce Park

Chapter 1 How To Make a Portfolio That Will Make Interviewers Want To Setup a Time To Meet You

Today’s entry level market is more competitive than ever. If I troll reddit, I see headlines like Where are all the truly entry-level developer jobs? and Looking for a CS job makes me want to cry..

So how do you create a portfolio that make interviewers want to meet with you? That’s what we’re covering next. But first, let me tell you a story.

1.1 What Shopping at Costco Taught Me That Will Help You Land That Interview

So everytime I go shopping at Costco, I always end up buying more food than I intend. Some of the things I accidentally bought over the years: Butternut squash ravioli, egg rolls, chocoloate covered almonds, salami, and mango peach salsa. 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.

1.1.1 The power of a free sample

The problem was I couldn’t pass up those free samples. And so I bought the ravioli, egg rolls, salsa, and salami. Every single time. And I ended up making an impulse purchase.

1.1.2 So let your portfolio be a Costco free sample

If you have limited experience and are trying to break into the tech industry, your portfolio is in essence your “free sample”. It’s the closest thing employers can do to “try before they buy.”

If you think about it investing in a junior level employee is a huge cost. 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. 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.

1.1.3 And that’s why your portolio has to show you can produce the results

I’d like you to repeat the following mantra over and over as you work through this process: “results first, job second.” 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. And the best way to do that is to have a strong slew of portfolio projects.

This is why I’m always encouraging new coders to have at least 6 to 8 well-developed projects in their portfolio. I want their “free samples” to make the employer want to “buy” them.

1.2 Let Other People Speak To Your Results With Testimonials

Results are important. Of course, if no one knows about them, it doesn’t do you any good.

When I began my web development career through freelancing, I read up on marketing as I had never studied the field before. One thing I learned was the power of having testimonials in getting others to do business with you.

1.2.1 “Know, Like, Trust”

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.” And nothing can convey that you are someone worth knowing and trusting than a testimonial from a third party. So do try and tastefully fit a testimonial on your porfolio site if you can, especially if you’re freelancing.

In fact, this phenomenon has a name and it’s called the primacy effect. The primacy effect “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”.

Said another way, first impressions count for a lot. And testimonials can help shape that impression.

1.2.2 The Questions To Ask To Get Really Great Testimonials

One of the things that make for believable testimonials are long detailed testimonials that tell a great story of your work. But how do you get these testimonials?

Here are the 6 questions I always ask after every client engagement. I pulled them from Copyblogger. They come from Sean D’Souza, a great marketer who runs the psychotactics.com marketing website.

What was the obstacle that would have prevented you from buying this product?

What did you find as a result of buying this product?

What specific feature did you like most about this product?

What are three other benefits of this product?

Would you recommend this product? If so, why?

Is there anything you’d like to add?

In practice, with these questions, I found I got really great long form testimonials. Sometimes I had to clarify what the testimonial giver mean in real-time, but overall it worked extremely well. Now you may obviously substitute the word “service” for product.

1.2.3 3 Tips for Ensuring a Smooth Testimonial

Tip 1: Record It

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. 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.

Then you can go back through the testimonial and easily pull out the pieces that you need.

Tip 2: Transcribe It

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. This is what I did when I was starting out.

Tip 3: Display It

Incorporate the testimonial into your portfolio. Display it somewhere. Perhaps make the audio (or part of the audio) downloadable. The point is make it easy for someone viewing your body of work to see the positive reference associated with it.

1.3 How To Get Testimonials If You Have No Clients

What do you do if you have no clients? 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?

1.3.1 You get testimonials from your other fields

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. 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.

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.

Is it ideal? No. Is it better than nothing? Absolutely, particularly if you use the 6 questions from the previous section.

1.3.2 Volunteering

Now if you’re really stuck, consider volunteering. 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.

1.4 Elements of a Standout Portfolio

So what is a standout portfolio? It’s the kind of portfolio you see that makes you go “Ooh”. The one that moves you to say “let’s hire this person.”

But can such a portfolio exist and how do you make one?

The standout portfolio consists of 5 elements:

Projects that show you’re a good fit for the company
Proof that you’re great to work with
Proof that you’re capable of learning on the job
Show as much depth as you can in the area you’re applying for
Technical elements of a portfolio

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.

1.4.1 How Working Backwards Can Help You Build the Right Portfolio

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

Step 1: Begin with the end in mind and stick with it

The first step is easy. Pick a specialization and stick with it. I’ve done dozens of interviews with new coders trying to break in. The number one mistake I see is wasted time due to an inability to pick a specialization and stick with it. 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”.

The most productive people I know at my company tend to have their specialities. I’ve worked with one front end coder who did an amazing job setting up a ReactJS search interface. But again, they specialized. They didn’t try to be a “ninja” in all the things.

Step 2: Have a general understanding what your specialization does on a daily basis and write down specific skills you should have

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. 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. They may team with a backend developer to ensure that this submission of data goes through.

So what are the specific skills you would write down? You know that you’d need to know HTML, CSS, and perhaps ReactJS (if that’s what the hypothetical front end developer used). You might have to know how to make the form mobile responsive.

The quickest way to get a general understanding is to talk to do some quick online research. You can google “what does a front end developer do?”. You can also ask the question on quora or reddit to get some answers. Or you can talk to people in real life by attending a local meetup.

Step 3: Now pick some projects

Now that you know what skills are required, try to brainstorm 3-5 projects you can take on that would give you this knowledge. If you’re stuck for ideas, don’t worry, we’ll give you some project ideas in upcoming sections of this guide. But before looking at those, I encourage you to try and come up with your own. Just set a timer for 15-20 minutes and go. Use Google or any tool at your disposal.

1.4.2 The 5 Elements of a Standout Portfolio

As promised, let’s talk about the 5 elements of a standout portfolio. Now a bit of a caveat that’s good news. Because the demand for programmers is so high, I’d conjecture that you don’t have to get everything 100% right. Be open to making mistakes and learning from the process. As you go through it, you’ll only become a stronger candidate.

Element 1 Picking Projects To Show You’re a Good Fit

Now one thing that can help you more easily distinguish yourself is having a portfolio of projects that shows you’re a good fit. But how?

Option 1: Use the company’s software (or the software that the company uses)

Does the company have an API or software that it uses? Try to use that API in your project. 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.

Option 2: Do a project that involves the company’s line of business (or is closely related to it)

Are you applying for a sports company? Then perhaps doing a project that involves sports would be a great idea. 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.

Element 2 Proof that you’re great to work with

As I’m’ writing this, The No Asshole Rule remains one of the top 10 sellers in the Amazon bookstore. While it’s a great book, the reason I bring it up is because working with people is 80-90% of the job.

So people will want to work with someone that is great to work with. While people might define a great teammate slightly differently, I think the following general characteristics are shared by all:

Treats others with professional respect – Do you behave professionally? Do you respect others’ boundaries and not make demeaning remarks about others?
Do you do what you say you are going to do and complete projects well and on-time? If other team members are having to pick up the additional load that’s not great.

And one easy way to indicate this is through testimonials.

Element 3 Proof that you’re capable of learning on the job

One of the harder things in technology is keeping up with all the new technology. Element 3 can be a bit trickier to prove when you’re first starting out.

My suggestion is to read up on the current trends in your specialization of choice. 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).

Not only be conversant in them, but also apply them in your projects.

One great story that has a lot of lessons in it is this one.

Element 4 Show as much depth as you can in the area you’re applying for

As a beginner, you’re limited by your experience. So how can you show depth? You can show it by reading a book on the syntax of the language of your choice and trying to understand the nuances. 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. If you’re mastering JavaScript, you’d want to know about prototypes and inheritance.

The point is, pick “one area” of your technology stack and try to learn as much as you can about it.

Element 5 Technical Details

Adopt the Google PageSpeed Insights recommendations and try to get your score up to 90% for both mobile and desktop.
Make your portfolio easy to navigate – Keep in mind a hiring manager has limited time to browse your portfolio. So make it easy to navigate (on mobile and desktop).
Responsive for mobile – Ensure your site design displays well on a mobile device. I use responsive frameworks like Bootstrap and Yahoo Pure. The framework doesn’t matter so much as that it looks good, especially if you are a front end developer.
Great UI elements and design (spacing, colors, etc.) – 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”. A great book for understanding the basics of design is The Non Designer’s Design Book.
MVP Portfolio – I was having a conversation recently with someone who was trying to break into the tech industry as a front end developer. They had a traditional Computer Science background but took a detour into another career and wanted to get back in. It was hard to evaluate where they were because they didn’t have any side projects to show.

This is why I advise newbies to expand your portfolio to 6-8 projects. The idea is to show them you’re constantly shipping stuff and learning. Remember, you have no experience, so you want to convey the idea that you are capable of learning and growing.

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. 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.

Here’s an example of a cool JavaScript project that I would consider to place you at expert level – sharrre.

Blogging – As if all the above is not enough work, I also advise people to start blogging about what they learn. 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.

But if you don’t believe me, check out the story of Beau Carnes. He did video blogging with YouTube and if you read his forum post, you can see that he really actively marketed himself. So I hope this opens you up to some ideas of how you can use blogging effectively to help you land a job.

1.5 What If You Don’t Have Any Project Ideas?

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. Just doing a simple application where a front end talks to a back end API can teach you a lot of things.

But if you’re stuck for ideas, here are some suggestions:

FreeCodeCamp Projects – FreeCodeCamp has a list of projects that you can choose from. If you’re going through the curriculum, then the series of projects you’ll do can help you get a starter portfolio goin.
MOOCs (massive open online courses) – So while MOOCs like Coursera are more academic in nature, you can use it to get some ideas for projects. 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.
Paid courses – I have yet to try a course from Udemy or Codecademy, but other students have told me about them. Udemy for instance has some courses where you build projects as part of the learning.
Online google search – You can also just randomly search Google for project ideas. Try typing in phrases like “software project ideas” and see what comes up. I’ve found some interesting ones by doing this.

1.6 20 Handpicked Portfolio Project Ideas

Now if you’re anything like me, you’d really like it if someone just laid out some project ideas for you. So that’s what this chapter is about. I’m going to lay out 20 handpicked portfolio project ideas. I’ll list them in order of easiest to hardest. I’ll also go into the skills each project will help you showcase and develop.

So a lot of these project ideas come from this GitHub repo especially since I take my own advice about using Google :).

As I suggest project ideas, I’m going to follow the following template.

Idea – I will suggest an idea.
Skills developed/showcased – Then I will talk about the skills you will develop and showcase to potential employers.

1.6.1 Idea 1 – Front End Todo List in Native JavaScript

I remember when I started, I did a todo list in Rails. In fact, I used this as a project in my portfolio.

Idea – But the actual idea I want you to focus on is doing a Todo List in native JavaScript. If you need to store todo items, then store it in localStorage.

Skills developed/showcased – This project will show that you understand the basics of JavaScript and can ship a basic working front end project. If you do a good job on the design, it can also showcase your design chops and CSS/HTML skills.

1.6.2 Idea 2 – Front End Todo List Using a JavaScript Framework

Idea – So unlike the previous idea, the actual idea you’re going to do a todo list using a modern JavaScript framework. Try to pick one of the more popular frameworks like React, Angular, Ember or Vue (at the time of this writing, 5/30/17). Because the JavaScript landscape changes so much, you might need to pick a different framework than the suggested ones.

Skills developed/showcased – 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. 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.

1.6.3 Idea 3 – Credit Card Validator on an HTML Form

Idea – 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). 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. Display an error message if the number is invalid.

Skills developed/showcased – 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). You can even do 2 versions of the form – one with vanilla JavaScript and the other with a popular framework like Angular or React.

1.6.4 Idea 4 – Complex Number Algebra

Idea – Write a JavaScript code to do addition, multiplication, negation, and inversion of complex numbers in separate functions. (Hint: Implementing the previous operations will let you do division and subtraction). Print out some results.

Extra front end challenge – Make a user interface with HTML/CSS.

Skills developed/showcased – 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. For example, when you’re done, does your JavaScript code look like a hot mess? Or does it look neat and clean? Don’t worry about what it looks like for now, we’ll talk about “clean code” later.

1.6.5 Idea 5 – Implement a Bubble Sorting Algorithm and one other sorting algorithm

Idea – Implement the bubble sort algorithm in the language of your choice. Then implement a quick sort or merge sort algorithm.

Extra front end challenge – Make a front end visualization of some kind showing the results as they are being sorted. This is not for the faint of heart!

Skills developed/showcase – 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. An understanding of data structures and algorithms is the key to getting into companies like Facebook or Google.

1.6.6 Idea 6 – Implement the Sieve of Eratosthenes

Idea – Using your language of choice, implement the Sieve of Eratosthenes. This is a mathematical algorithm to find prime numbers.

Skills developed/showcased – This will help you showcase your ability to implement algorithms and your skill in the language you chose.

1.6.7 Idea 7 – RPN calculator

Idea – Implement a reverse polish notation calculator. If you’re not familiar with it, RPN is a notation in which mathematical operators appear after the operands. Below is an example:

4 6 +

This statement is equivalent to saying “4+6” (which equals 10).

Skills developed/showcased – 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. If you’re a backend developer, then you can write a command line type program where you enter “4 6 +” at the command prompt. If you’re a front end developer, you may want to have an input box where people enter “4 6 +” or whatever RPN expression.

1.6.8 Idea 8 – String Report

Idea – 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.

Extra challenge – You can also have your report print out a count by vowel (e.g., the number of e’s, a’s, etc.)

Skills developed/showcased – This will showcase your facility to process strings in your given language as well as familiarity with basic libraries available to you. It will probably help showcase where you are at in terms of being able to write “maintainable” code.

1.6.9 Idea 9 – RSS Feed Builder

Idea – Given an RSS or Atom Feed link, get all posts and display them in a user-friendly format.

Skills developed/showcased – This will showcase your ability to parse through a well-defined formatted specification and then convert that into a user friendly presentation. You’ll probably also figure out how to make HTTP calls and possibly paginate through a list of posts to display them.

1.6.10 Idea 10 – Command Line Cipher

Idea – A cipher is a function for encrypting messages. Build a command line tool that lets you encode and decode a message based on a cipher.

Skills developed/showcased – You’ll most likely end up learning about using the modulus math operator as well as how to build a command line program. This will showcase your ability to put together a relatively simple command line interface and let someone see how you organize your code.

1.6.11 Idea 11 – Regex Matching Tool

Idea – Build a clone of something like rubular.com in your chosen language. A user can enter a regular expression pattern and a series of strings to see if any matches are found.

Skills developed/showcased – You’ll learn about regular expression matching in the language of your choice.

1.6.12 Idea 12 – Port Scanner

Idea – “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. On any successful connections mark the port as open.”

Skills developed/showcased – You’ll learn what facilities your programming language of choice has for connecting to ports and handling IP addresses.

1.6.13 Idea 13 – Recipe Class and Program

Idea – Create a recipe class with ingredients / measurements and build a recipe manager program around this.

Extra challenge – Build a front end web interface around this so a user can add, delete, and/or edit recipes. Let them tag recipes with categories.

Skills developed/showcased – 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.

1.6.14 Idea 14 – Bulk Thumbnail Creator

Idea – 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).

Extra challenge – Show a progress bar as all the images you are converting to thumbnails are being processed.

Skills developed/showcased – You’ll learn a bit about downsampling images and building an animated progress bar if you do the extra challenge.

1.6.15 Idea 15 – Bandwidth Monitor

Idea – 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. 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.

Skills developed/showcased – This will teach you about how your computer uploads and downloads data. You’ll probably also showcase some data visualization skills if you create a graph to show the data.

1.6.16 Idea 16 – Database Report Generator Utility

Idea – Create a utility that generates a report based on some tables in a SQL database. 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.

Skills developed/showcased – You’ll be showcasing your knowledge of basic SQL and how to extract those results into something useful.

1.6.17 Idea 17 – Web Based PDF Generator

Idea – A web application which can read in a text file, html file or some other file and generates a PDF file out of it. You can have a user upload the file and have your program spit out a PDF of it.

Skills developed/showcased – This will let you showcase your skills at making a web application that does something practical. Assuming you don’t use a pdf converter plugin and you write the conversion algorithm yourself, you’ll learn about PDF formatting.

1.6.18 Idea 18 – Eulerian Path

Idea – 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. A Eulerian Path starts at one node and traverses every edge of a graph through every node and finishes at another node. A Eulerian cycle is a eulerian Path that starts and finishes at the same node.

Skills developed/showcased – This will help showcase your ability to deal with data structures and algorithms. It’s also a large enough program that I think it will show a prospective employer how you deal with larger projects.

1.6.19 Idea 19 – Connected Graph

Idea – Create a program which takes a graph as an input and tells the user whether or not every node is connected. Now this one is a bit of a challenge. You’re going to have to make a few decisions. You’ll have to: 1) decided on the input format for your graph. 2) Research and implement an algorithm to tell you whether the graph is connected.

How do you know when you’ve got a good enough portfolio?
10 ideas for showcasing your work

1.6.20 Idea 20 – Inverted Index

Idea – An Inverted Index is a data structure used to create full text search. Given a set of text files, implement a program to create an inverted index. 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. The search index can be in memory.

Skills developed/showcased – This is probably a good “stretch” project. It’s going to require you to research what an inverted index is and how to implement it. In addition, you’ll have to make something practical out of that knowledge.

And there you have it – 20 ideas to help you build a portfolio! Within this list, I tried to stack things in order of easiest to hardest.

1.7 Finding a good web hosting for your portfolio and setting it up

So there are many options for hosting your portfolio. Personally, I think the easiest one is to use GitHub pages. It’s free and you don’t have to even worry about registering a domain or anything like that. If your GitHub username is “melanie12”, then most likely you’ll end up a portfolio url of melanie12.github.io.

I’m going to give you my own customized setup for setting up a portfolio. 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.

1.7.1 The General Outline for Setting Up Your Own Portfolio Complete with Custom Domain

Step 1 – Pick your our domain name

This can be a fun step. You can get creative and pick out your own domain. If you’re stuck for ideas, I recommend using something close to your name. For example, I registered “brucepark.io” as my domain.

This is partly because “brucepark.com” was taken but also because I wanted an “io” domain. If you’re name is “Bill Smith”, you might find the “.com” is already taken so you might have to get creative.

Step 2 – Register the domain name

Next, you’ll have to register the domain name. Personally, I use Namecheap, but you can use whatever service you feel comfortable with.

Step 3 – Pick a host

In the past, I’ve used Hostgator. I currently use Digital Ocean to host my blog.

Step 4 – Create the portfolio

If you’re not great at design, pick out a theme. I recommend using a Twitter Bootstrap based theme as there are plenty of free mobile friendly themes around that.

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. 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.

Step 5 – Put the portfolio up on your hosting provider

Depending on what hosting provider you use, you may have to use an FTP program such as FileZilla. With GitHub pages, you just push up your html and css pages to GitHub.

Summary

Now in the next section, I’ll show you my own customized setup.

1.8 Beginner’s Guide to Using Github Pages With Your Own Custom Domain for Your Portfolio

As a web developer, I’m sure you appreciate the importance of an online portfolio. For a long time, I used Hostgator to run my WordPress blog and used that as a double for a portfolio site.

But eventually, I started migrating to Digital Ocean and was paying Hostgator to do….nothing.

In the interim, Github started allowing developers to host static websites via Github pages.

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.

1.8.1 And who doesn’t love free?

That’s why this article will show you how to make your own static site portfolio using a custom domain on GitHub pages. But first, I need to tell you about Middleman.

1.8.2 Using Middleman to Construct Your Static Site Portfolio

As a ruby programmer, one of the best tools I’ve found to roll your own static site is Middleman.

While updating my portfolio as I changed jobs, I realized a WordPress blog was not the best place to post your portfolio. After a bit of research, I realized I really wanted a separate static site.

1.8.3 Why have a static site?

Furthermore, I wanted a place where I could easily update descriptions of projects I had worked on. Plus, I wanted a nice layout that I could easily customize. 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.

Also, static sites load faster than their dynamic counterparts.

1.9 Why use Middleman?

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”.

For those of you who don’t know what those are, partials are basically templates that cut down on repetitive code in HTML pages.

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. Consequently, partials save you quite a bit of time.

Middleman gives you those capabilities as well as the option to use popular templating languages such as Haml. Personally, I like Haml because it’s easier to read as a coder and it’s easier to write. Unlike raw HTML, you don’t have to write opening and closing tags.

Also, since Middleman is built in Ruby, it’s easy for me to understand how everything works.

Finally, now that you understand the reasons for a static site portfolio, it’s now time to get started constructing one.

1.9.1 Step 1 – Getting Started With Middleman

All you really need to get started is to create a project with a GitHub repository and a Gemfile with Middleman.

My Middleman Gemfile

Below is a copy of my Gemfile. I’m going to assume you have some experience with Ruby and environment management tools like rbenv.

Depending on when you’re reading this, you might have to upgrade the gem versions. You just need the middleman gem, not middleman-livereload or the other gems which I think I used due to wanting live reload capabilities on multiple platforms.

# If you do not have OpenSSL installed, update
# the following line to use "http://" instead
source 'https://rubygems.org'

gem "middleman", "~>4.1.6"

# Live-reloading plugin
gem "middleman-livereload", "~> 3.1.0"

# For faster file watcher updates on Windows:
gem "wdm", "~> 0.1.0", :platforms => [:mswin, :mingw]

# Windows does not come with time zone data
gem "tzinfo-data", platforms: [:mswin, :mingw, :jruby]

1.9.2 Step 2 – Configuring Middleman with config.rb

Below is a snapshot of how I configure my asset directory paths with middleman (images, CSS, and JavaScript files). Yours might look slightly different depending on whether you choose to use Haml or the paths you choose for your asset directories.

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

1.9.3 Step 3 – Setting Up Your Directory

You will make edits in the source directory. Then once you issue a middleman build command, middleman will turn your templating language markup into the raw HTML needed for your static website.

To help you get up and running quickly, I’m going to show you the directory structure for my own portfolio site.

What My Directory Tree Looks Like

You’ll notice the directories I specified in config.rb as well as the partial files I have in the layout directory. I use the partials for things like the site header and footer.

.
├── Gemfile
├── Gemfile.lock
├── README.md
├── build
│   ├── CNAME
│   ├── images
│   │   ├── background.png
│   │   └── middleman.png
│   ├── index.html
│   ├── javascripts
│   │   ├── all.js
│   │   └── responsive_menu.js
│   └── stylesheets
│       ├── all.css
│       ├── marketing-old-ie.css
│       ├── marketing.css
│       ├── normalize.css
│       ├── responsive_menu.css
│       └── side-menu.css
├── config.rb
└── source
    ├── images
    │   ├── background.png
    │   └── middleman.png
    ├── index.html.haml
    ├── javascripts
    │   ├── all.js
    │   └── responsive_menu.js
    ├── layouts
    │   ├── _header.html.haml
    │   ├── _header2.html.haml
    │   ├── _lc_work.html.haml
    │   ├── _menu.html.haml
    │   ├── _skills.html.haml
    │   ├── _usc_work.html.haml
    │   └── layout.html.haml
    └── stylesheets
        ├── all.css
        ├── marketing-old-ie.css
        ├── marketing.css
        ├── normalize.css
        ├── responsive_menu.css
        └── side-menu.css

1.9.4 Step 4 – Start coding your site locally

Once you have a setup like the one described above, you can begin working on your portfolio locally. You are also ready to push the code to your repository.

If this is your first time using Middleman, you may find it useful to read up on the command to start a new site. It’s pretty straightforward if you’re familiar with Ruby.

1.10 Getting Ready to Deploy to Github Pages

In the paragraphs above, I described the 4 steps I used to roll my own static portfolio site on GitHub. Now, I cover how to use Namecheap, GitHub, and the middleman-deploy gem to automatically deploy your site up to GitHub.

1.10.1 Step 1 – Setting Up Git

For your recollection, below is the tree diagram of my current directory setup. 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.

.
├── Gemfile
├── Gemfile.lock
├── README.md
├── build
│   ├── CNAME
│   ├── images
│   │   ├── background.png
│   │   └── middleman.png
│   ├── index.html
│   ├── javascripts
│   │   ├── all.js
│   │   └── responsive_menu.js
│   └── stylesheets
│       ├── all.css
│       ├── marketing-old-ie.css
│       ├── marketing.css
│       ├── normalize.css
│       ├── responsive_menu.css
│       └── side-menu.css
├── config.rb
└── source
    ├── images
    │   ├── background.png
    │   └── middleman.png
    ├── index.html.haml
    ├── javascripts
    │   ├── all.js
    │   └── responsive_menu.js
    ├── layouts
    │   ├── _header.html.haml
    │   ├── _header2.html.haml
    │   ├── _lc_work.html.haml
    │   ├── _menu.html.haml
    │   ├── _skills.html.haml
    │   ├── _usc_work.html.haml
    │   └── layout.html.haml
    └── stylesheets
        ├── all.css
        ├── marketing-old-ie.css
        ├── marketing.css
        ├── normalize.css
        ├── responsive_menu.css
        └── side-menu.css

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.

To facilitate this, I have 2 separate Git remotes. If you type git remote -v at the command line in my repo, you’ll see something like this:

gh-origin	git@github.com:treble37/treble37.github.io.git (fetch)
gh-origin	git@github.com:treble37/treble37.github.io.git (push)
origin	git@bitbucket.org:treble37/brucepark_io.git (fetch)
origin	git@bitbucket.org:treble37/brucepark_io.git (push)

1.10.2 Step 2 – Setting up middleman-deploy

If you’ve been following this tutorial, you should already have middleman in your Gemfile. Now we’re going to add middleman-deploy to your Gemfile as below.

# If you do not have OpenSSL installed, update
# the following line to use "http://" instead
source 'https://rubygems.org'

gem "middleman", "~>4.1.6"

# for deploying to github pages
gem 'middleman-deploy', '~> 2.0.0.pre.alpha'

# Live-reloading plugin
gem "middleman-livereload", "~> 3.1.0"

# For faster file watcher updates on Windows:
gem "wdm", "~> 0.1.0", :platforms => [:mswin, :mingw]

# Windows does not come with time zone data
gem "tzinfo-data", platforms: [:mswin, :mingw, :jruby]

1.10.3 Step 3 – Adjusting your config.rb

Now we’re going to add to the config.rb file from the previous steps. Add the activate :deploy block per the below config.rb file. You will have to adjust the values of deploy.remote and deploy.branch to appropriate values.

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

It’s likely your deploy.branch value will be master if you setup your GitHub repository to your-github-username.github.io. If you created a differently named repository, then the value will be gh-pages per the GitHub documentation.

1.10.4 Step 4 – Configuring 2 remotes

As I ran the middleman-deploy command, I received a Can’t deploy error. Since my deploy.remote value is set to gh-origin in the config.rb file, I have to configure my Git remotes as follows in the build directory:

gh-origin	git@github.com:treble37/treble37.github.io.git (fetch)
gh-origin	git@github.com:treble37/treble37.github.io.git (push)
origin	git@bitbucket.org:treble37/brucepark_io.git (fetch)
origin	git@bitbucket.org:treble37/brucepark_io.git (push)

The command I used is:

git remote set-url gh-orgin git@github.com:treble37/treble37.github.io.git.

1.10.5 Step 5 – Use “Namecheap Basic DNS”

Since I originally hosted my portfolio site on Hostgator, I also had to change my Namecheap DNS settings. I clicked on “Manage” for my brucepark.io domain in the Namecheap interface and set it from “Custom DNS” to “Namecheap Basic DNS”.

1.10.6 Step 6 – Setting Up Your Domain on GitHub and Namecheap

You also need to do the following:

Add a CNAME file to your build directory in your repository
Create 2 A records and a CNAME record on Namecheap
Setup your custom domain on GitHub

For the first 2 bullet points regarding the CNAME and the A records, you can follow the directions from Namecheap on this page.

For setting up your custom domain on GitHub, you navigate to the repository on GitHub of your portfolio, click Settings and add a custom domain under the Custom Domain section. You can see how I set it up from the image below.

1.10.7 Step 7 – Running middleman deploy command

Finally, you can run bundle exec middleman deploy If everything has been setup properly, the portfolio source code in your source directory will be compiled into your build directory and then pushed automatically up to your github directory.

You’ll have to push your source directory up to bitbucket (or whatever repository you are using to host your source directory).

Summary

In this article, I talked about using Middleman and your DNS provider to roll your own static site portfolio on GitHub pages. To summarize the steps:

Use Middleman to code your static site
Use the middleman-deploy gem to help deploy your static site HTML to GitHub pages
Configure your settings properly on both GitHub and your DNS provider

1.11 Epic Resources

see the Bonuses in Chapter 7.2

Chapter 2 What Skills To Focus On So That You Come Across as the Best Job Candidate

One thing I learned from studying marketing was the importance of picking a “niche” to serve. A niche in this case is a specialized segment of the market you choose to serve. For example, if you’re a grocery store, you might decide to serve consumers interested in high-end organic food.

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.

2.1 You Don’t Have Time To Do Everything: The Art of Focus

2.1.1 Niche or go broad?

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. Talking to folks new to coding, I sometimes hear things like “I’m interested in C sharp, Python, JavaScript, Golang, CSS, and Ruby”.

2.1.2 The Niches

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”. And if I delve further into those job descriptions, they usually expect certain specific skills.

Even if you had no full-time job, it would still take time to master both the front and back ends. For people who are brand new to coding, I recommend picking a niche that you enjoy and then growing from there. If you want to brand yourself as “full stack”, then by all means go ahead.

But a lot of people just getting into coding have full-time jobs or other daily obligatinos that prevent full time focus. If that’s the case, then I would encourage you to pick a niche and then branch out from there.

2.1.3 An Easy 2-Step Framework For Choosing What to Focus On

So in deciding what to learn to presumably get a coding job, I always encourage people to focus on what they enjoy doing. This

Step 1 – Try something and see if you enjoy it

Do you love writing SQL queries? Maybe you’d rather specialize in backend development or something close to data engineering. 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.

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.

Step 2 – Look at the job market demand for your chosen skills in your desired location

So now that you’ve picked what you want to learn, it’s time to look at the job market. It’s quite possible you’ll find a remote job and geography won’t matter. But usually most remote jobs ask for senior level developers (as far as I’ve seen).

So you’ll want to know what’s available in city or town you want to live in.

Here are a few ways to spot check the demand:

Indeed.com – I like Indeed because lets you search by keyword and location and the results come back with salaries listed (sometimes). It’s useful for getting a handy snapshot.
Craigslist (software/qa/dba/etc) – I like searching the software jobs section on Craigslist. I don’t actually apply to any of them there as I’ve found most of them to be of low quality. 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). However, it can give you another quick snapshot of what’s available in your area.
Stackoverflow Jobs – I like typing the keyword of my choice and the location and seeing what pops up. It can give you a relative demand of what’s available in your area. For example, if I type “ruby” and “Los Angeles”, I get about 6 results pop up. If I do it for the United States (instead of just LA), I get 199 results as of June 2017. 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. It seems there’s quite a bit more demand for JavaScript at the moment.

Usually, between these 3 job portals, I can get an idea of the demand. Another great way to gauge demand is to attend a local technology conference centered around your technology stack. There will often be a job board and you can see which local companies are hiring.

Step 3 – Estimating Salary

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:

Glassdoor.com – I like to type in the technology keyword (e.g., “javascript developer”) and then seeing what the salaries are). Sometimes your technology stack might not display salaries. In which case, I might resort to typing “software engineer” and just getting a ballpark idea for the locale.
Payscale.com – This outputs a “what if” report with a salary range showing you where the median is.
RobertHalf.com – This has a salary calculator with location. I’ve noticed the estimates here tend to be a bit higher than the others (so I like to include them).
Salary.com – This is a site I recently found that has a “compare” feature so you can compare multiple job titles and salaries. I usually search for “software engineer”. You might want to try “web developer” as well.

I usually make a chart of the low, medium, and high salary numbers and take the averages to get an idea.

Time to niche

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.

2.2 Basic Fluency & Skills With Your Chosen Tech Stack So You Can Pass the Interview

2.2.1 Sample Algorithmic Programming Interview Questions That You Should Ace

Note: I compile these and the coded solutions in a separate downloadable bonus

2.2.2 A list of front-end questions to study

Here are 20 of the best questions I pulled from this list of front end interview questions.

If you have 5 different stylesheets, how would you best integrate them into the site?
How many resources will a browser download from a given domain at a time? What are the exceptions?
Name 3 ways to decrease page load (perceived or actual load time).
What does CORS stand for and what issue does it address?
What does a doctype do?
What’s the difference between full standards mode, almost standards mode and quirks mode?
What’s the difference between HTML and XHTML?
What is the difference between classes and IDs in CSS?
What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?
Describe Floats and how they work.
Explain how a browser determines what elements match a CSS selector.
Describe pseudo-elements and discuss what they are used for.
Explain event delegation
Explain how this works in JavaScript
Explain how prototypal inheritance works
Difference between: function Person(){}, var person = Person(), and var person = new Person()?
What’s the difference between .call and .apply?
Explain Function.prototype.bind.
Describe event bubbling.
Explain the same-origin policy with regards to JavaScript.
What tools and techniques do you use debugging JavaScript code?

2.2.3 A list of back-end questions to study

Here are 50 of the best questions I pulled from this list of back end interview questions.

What is MVC?
What is dependency injection?
What is a real-time system and how is it different from an ordinary system?
What’s the relationship between real-time languages and heap memory allocation?
Immutability is the practice of setting values once, at the moment of their creation, and never changing them. How immutability can help writing safer code.
Pro and cons of mutable and immutable values.
What’s the Object-Relational impedance mismatch?
Which principles would you apply to define the size of a cache?
What’s the difference between TCP and HTTP?
What are the tradeoffs of client-side rendering vs. server-side rendering?
How could you develop a reliable communication protocol based on a non-reliable one?
Explain threads to your grandmother
Explain streaming and how you would implement it.
Explain Unicode/Database Transactions to a 5 year old child.
Suppose the system you are working on does not support transactionality. How would you implement it from scratch?
Which are the limits and pitfalls of Active-Record?
What are the differences between Active-Record and Data-Mapper?
What is the intent of the Null Object Pattern?
Could you write a Thread-Safe Singleton class?
Why in TDD tests are written before code?
C++ supports multiple inheritance, and Java allows a class to implement multiple interfaces. What impact does using these facilities have on orthogonality? Is there a difference in impact between using multiple inheritance and multiple interfaces? Is there a difference between using delegation and using inheritance? [This question is from The Pragmatic Programmer, by Andrew .Hunt and David Thomas]
Why is there a rising interest about Functional Programming?
What is a closure, and what is useful for? What’s in common between closures and classes?
What are generics useful for?
Why first-party cookies and third-party cookies are treated so differently?
What’s ACID (Atomicity, Consistency, Isolation, Durability)?
How is Lazy Loading achieved? When is it useful? What are its pitfalls?
What’s the N+1 problem?
What is Eventual Consistency?
About the CAP Theorem, make examples of CP, AP and CA systems.
How does NoSQL tackle scalability challenges?
In which case would you use a document database like MongoDB instead of a relational database like MySQL or PostgreSQL?
Why do we need Concurrency, anyway? Explain.
Why is testing multithreading / concurrent code so difficult?
What is a Race Condition? Code an example, using whatever language you like.
What is a Deadlock? Explain using code.
What is Process Starvation?
What is a Wait Free algorithm?
How to deal with failures in Distributed Systems?
Let’s talk about the several approaches to Reconciliation after network partitions
What are the Fallacies of Distributed Computing?
When would you use Request/Reply and when Publish/Subscribe?
Make a FIFO Queue using only LIFO Stacks. Then build a LIFO Stack using only FIFO Queues.
Write a snippet of code affected by a Stack Overflow
Write a tail-recursive version of the factorial function
Write a simple Garbage collection system
Write a basic message broker, using whatever language you like.
Write a very basic web server. Draw a road map for features to be implemented in the future.
What is CQRS (Command Query Responsibility Segregation)? How is it different from the oldest Command-Query Separation Principle?
How would you design a software system for scalability?

2.2.4 Coding Challenge Resources

Here’s a list of interactive coding challenges that will let you practice.

HackerRank – This is an interesting site which although I haven’t used I’ve heard good things about. You can do problems and if you score well enough, companies use it as a recruiting tool.
Codefights – A site similar to HackerRank which I also haven’t tried yet.
Topcoder – Topcoder is a site I enjoy because of their “match editorials”. You can participate in algorithm challeneges and you can get solutions to the problems you don’t understand. The only thing is that there are only 4 languages represented: Java, C++, Python, and VB.net.
Codewars – This is somewhat similar to Topcoder but with a larger variety of programming languages.
Project Euler – So Project Euler is a fun little site that gives you mathematical programming challenges. The challenges get progressively harder.
Exercism.io – 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. It’s like free code review.
Leetcode – A programming interview question site. I’ve heard good things about it but haven’t tried it.
Interview Cake – Another programming interview questions site. I’ve heard good things about it but haven’t had a chance to try it yet.

2.3 What About a Coding Bootcamp?

These days there’s definitely been some industry pushback against coding bootcamps. It’s a very personal decision. Some allow you to go part-time and others insist you go full-time. Some have a tuition guarantee around finding a job while others expect you to front the cost no matter what. Lauren Bradford of Learn To Code With Me posted an interesting article from a bootcamper describing their typical day.

2.4 Epic Resources

see the Bonuses in Chapter cha:bonuses_skills

Chapter 3 How Do You Get a Job That Requires Experience When You Have No Experience?

3.1 Ideas for Quickly Building Experience

I talk about freelancing as a good way to get started because that’s how I built my portfolio. But before we dive deeper into that, let’s discuss some other options for quickly building experience when you don’t have any.

Help someone else – helping a friend or someone in your network can be a good way to build your portfolio.
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. 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.
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.
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. Why? 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. Of course, this is also one of the most challenging ways a beginner can get started.
Group project – Group projects can be fun and motivating, but you have to stay focused on coming up with a piece for your portfolio. Too often, I’ve been in groups where the focus drifts and people are more interested in chatting than getting anything done.

3.2 Using Freelancing To Build Your Experience

Perhaps you’ve heard of the Catch 22 effect? Catch-22 refers to “a paradoxical situation from which an individual cannot escape because of contradictory rules.” (source: Wikipedia

For example, no one will give you a job without experience but you can’t get experience without a job.

So what is one to do? 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.

3.2.1 Where to Find Clients

Clients are actually everywhere. You just haven’t been looking yet. They’re your neighbors, your dentist, your cousin, your friend’s friend who needs a website, or maybe even your local plumber. But how do you reach these people? Let’s talk about some basic marketing and lead generation.

What the Panhandler Near the I-5 Freeway Exit Taught Me About Basic Marketing and Lead Generation

Living in Los Angeles, I run into more than a few panhandlers. 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”. 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.

And sure enough, other people would stop near the I-5 exit and give the panhandler money for his troubles.

The Panhandler is a perfect example of marketing

In a sense, the panhandler is marketing his services. 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).

And the panhandler should make you feel good about marketing your services

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.

The 2 types of leads: cold and warm

Now the panhandler is a perfect example of cold lead generation. No one who stops near the freeway exit has ever heard of him. And when you first start pitching your services, no one may have heard of you.

A warm lead is someone who knows you already. 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. The point is, they have some kind of preexisting relationship with you.

As you might suspect, the warmer the lead, the easier it is to sell to them. For example, it’s easier for my mom to give me a $1000 loan without a lot of headache since we are blood relatives. It would be much harder for my mom to justify giving the panhandler a $1000 loan.

Are you trying to build a business or gain experience?

When you’re first starting out, it doesn’t matter how you get your leads, just that you get them. I’ve heard objections like “well I’ve heard low-paying-bidding-site.com is a race to the bottom.” When I ask, “but are you trying to build a business or just get some experience in your portfolio?”

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. Those are 2 completely different goals and should be treated as such.

Sources for cold leads

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.

You might be wondering things like “but how long does it take” to get a client or “how many pitches should I send”? Like any consultant, I will tell you “it depends.”

It depends on what the potential client is looking for, how well your skillset matches up, and how well you communicate your pitch. 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.

The one thing I would suggest is to track your numbers. Keep track of how many leads you send out, on what platform, how many deals you land, and the profitability of them. This way after a while, you’ll be able to see which platform is the best for you to invest your time in.

Sources for warm leads

Your sources for warm leads will vary. In speaking to new coders trying this process, some have a buddy who hooked them up with someone who needed a brochure website. Another fellow I know used Reddit. Your mileage may vary depending on how you tap your network.

Where I Got My First Clients

When I moved to California, I got my start by bidding on Elance.com (now Upwork.com). I even found local clients on there. I also got some by cold-calling. I really didn’t know anyone in California, so it was necessary to start this way.

As I really hate cold-calling, I even experimented with hiring folks from oDesk to do it for me. I never quite made this work. The point is you can land clients through pretty much any technique, you just have to work it.

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.

Long Term Marketing: Blogging and Open Source

When I started freelancing, I also put up a brochure site using WordPress. Then I wrote a few articles for it that I thought were relevant to business owners wanting websites. That was in 2013 or 2014. This year in 2017, I got a message through that site asking about a potential website redesign.

The point is, having your own site up (and with at least a few articles) is a good way to land potential clients.

One thing I have always wanted to do (but never have) is use open source as a marketing tool. The famous Ruby on Rails consultancy Thoughtbot does this and I’ve heard good things about it from other freelancers.

Online Advertising

You could also try online advertising through a medium like Facebook or Google ads. I’ve used Facebook ads to advertise a service I was giving away (mentoring to new coders). But there’s no reason why you couldn’t do it with a paid service such as website implementation.

3.2.2 How to Charge

The two popular ways to charge people for software labor are fixed bids or hourly billing. Before we talk about which might be better, let’s talk about risk.

Managing Risk

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.

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. 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). In this case the risk is on you to manage the scope.

I think this can feel somewhat daunting if you are new to programming as you are just learning the ropes.

Now let’s put the shoe on the other foot and say you charge by the hour. Now you’re effectively putting the financial risk on the client. If you underestimate the amount of time that something takes, then the client will end up paying more.

I’m sure you can see that this might not lead to a happy client if you grossly underestimate the costs. So to keep the client happy, you may end up discounting your rate.

A Word On Value-Based Pricing

So what is the best way – fixed or hourly? We’ll come back to that. First, let’s talk about a concept I’ve heard in the marketing world called value-based pricing. The idea is that you charge a fraction of the value your service or product is going to provide the business.

So let’s say you’re building a software product that will net the client $2 million in revenue in 3 months. A value-based pricing scheme might involve charging $400,000 for developing that product (20% of the $2 million). These are random numbers but you get the idea.

“But wait a minute”, you say. “Isn’t this just a high end fixed price”? And yes it is in a way. But the idea is that you are charging based on the value your product or service is providing. So it’s a win for everyone. It’s a win for the client because they will get tremendous value out of your product or service. And it’s a win for you because you’ll make a handsome profit.

But what should you do as a newbie?

I would actually encourage you to experiment. Try billing hourly. Try billing fixed price. Focus on delivering value to your clients. This is the best way to be successful as a freelancer in the long run.

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. But if you’re doing it to build a portfolio (rather than a business), than optimizing for experience rather than price makes more sense.

3.2.3 Handy Freelancing Tools

Of course, part of being a freelancer is staying organized with respect to project management, billing and time tracking.

Billing and Time Tracking Tools

When I started, I tried different tools. But the one that worked the best for me was Freshbooks.

The interface is simple and easy to use to track time (it’s also web-based so you can access it from anywhere). You can setup multiple projects, multiple clients, and multiple “tasks” for each project. And then you can generate a nice report so you can see where you’ve been spending your time.

I’ve also used desktop time tracking tools such as Office Time, but overall, I found Freshbooks perfect for my needs.

Project Management – Basecamp, Trello, Pivotal

The other important part about freelancing is to stay on top of your project tasks and communicating with the client. Basecamp is a great project management tool. You can have users login and leave comments and feedback. I like having an “all-in-one” portal to manage client communication. As I learned the hard way, this beats having to manage all communication in email.

Trello can work too as you can invite members to specific “boards” where you can projects.

One place I freelance contracted for used Pivotal Tracker. That was by far my favorite way to manage software projects. You could write “story tasks” and assign them “velocity” points. It was great for a software team. If you’re a solo freelancer, you might want to get started with Trello or Basecamp (if you can afford it).

Email & Communication

One thing I noticed about clients is that they get anxious about the state of their software project. You should manage communication expectations ahead of time.

Now you don’t want them calling you every 5 minutes. So promise a regular update. 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. Or I suggest a daily email update. Ask your client what their preference is. Some clients need more communication to “feel secure” while others need less.

Less is ideal for you as then you will have more time to work.

Contracts

When you’re starting out, it’s good to get in the practice of capturing things down in writing. Having a contract and/or scope of work prevents the client from going back and saying “I don’t remember that.”

There’s nothing like having a signed document to cover your bases. Here’s a free contract template. Ideally, if you’re communicating well with the client and are providing regular updates, there should be no surprises or misunderstandings.

Collecting the Money

Ah, invoicing. I was a bit nerve-wracked about collecting money when I first started out. I would send out an invoice for the hours I worked. Fortunately, I never had a bad experience with clients paying. I always got paid for the hours I worked.

On a side note, this is another reason I liked Freshbooks. It let you see when the clients saw the invoice but didn’t pay. Sometimes it would take clients a few days, but they eventually paid.

Summary

So by now, hopefully you have a good idea of how to start freelancing.

Epic Resources

see the Bonuses in Chapter cha:bonuses_experience

Chapter 4 Cultivating Job Leads: How to Network When You’re Starting Out

When you’re first starting out in the technology industry, you may not know anyone who can give you leads to a job. 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.

This is part of why I encourage you to develop a strong portfolio. It gives you a way to stand out from other candidates who haven’t done the work.

4.1 How To Meet More Potential Job Leads: The Hallway Track

Recently, I’ve been somewhat obsessed about how likeability can influence your economic opportunities in life. One choice quote I read came from a book called Barking Up the Wrong Tree which stated:

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. 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. Often this comes down to something we’re all very familiar with: good ol’ ass kissing. Is flattering the boss effective? Research has shown flattery is so powerful that it works even when the boss knows it’s insincere. Jennifer Chatman, a professor at the University of California at Berkeley, did a study to see at what point flattery backfired . . . but she couldn’t find one.

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

4.1.1 Attending local tech meetups in your niche

Attending local meetups in technology you’re interested in can be a great way to network and meet new people. I’ve met people I was going to be working (without realizing it) by attending meetups and community events. Plus, it can just be fun to get out and meet fellow geeks.

4.1.2 The story of how an average developer got a job through networking

In fact, someone (let’s call him Jim) I knew got his programming job by attending a local programming meetup. This particular programmer had applied cold to Company X by sending in his resume and was rejected. He kept attending the meetup and a year later, he got a job at Company X. How do I know this?

My friend who works at the company with Jim noted that Jim appeared to be good friends with the boss. My friend also noted that although Jim was by no means the greatest programmer, he was good at getting people to like him.

This is the power of the hallway track.

4.1.3 Community

One of the things that first puzzled me about the technology scene was the abundance of meetups. I used to wonder why people weren’t content with just a keyboard and their terminal. After all, most programming occurs when you sit and type alone at your keyboard (unless you’re in a pair programming shop).

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. It was a huge time saver for him. Plus, I also noticed I was learning interesting things at this study group.

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. In fact, blogger John Sonmez posted this nice article about community and its benefits.

Saron Yitbarek was a self-taught coding newbie who appropriately started a website called Code Newbie with podcasts and a forum for new programmers. The forum is a nice and friendly place for coding newbies.

4.2 Lightning Talks

4.2.1 The power of lightning talks

A lightning talk is simply a brief (15-30 minutes) technical talk about a particular technical topic. One thing I noticed is that when a lightning talk is well-received, the speaker gets a lot of questions. People also tend to gravitate to talk with the speakers.

Why? I believe it works on a couple of levels. First, it’s less intimidating to make small talk with a speaker. They usually offer to answer questions and they’ve also shown willingness to put themselves out there. Secondly, people genuinely have questions for the speaker.

Also, I’ve noticed that a lot (not all) of the speakers tend to be senior level engineers. 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.

4.2.2 How to Give a Good 10 Minute Lightning Talk

Recently, I gave a 10 minute lightning talk on moving from Elixir to Ruby. You can find a link to a copy of the slides on SpeakerDeck.

It was my first lightning talk ever and it was in a new meetup group I recently joined. Naturally, I was a bit nervous. 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.

Step 1 – Come up with the idea

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. I wanted to share some of the experiences I had working through the language.

I thought about doing something purely on the syntax of Elixir. But I didn’t think a talk called “Elixir Syntax” would be that interesting. Also, I didn’t want the talk to be a rehash of what people could find in the documentation.

So I tried to find a “spin” on the topic…

Step 2 – Put a “spin” on the idea that makes it unique

Since my primary programming language was Ruby, I decided to talk about my own experience of trying to learn Elixir coming from Ruby.

This added the niche factor that I thought would help make it a bit more interesting to folks. It also didn’t hurt that I had written a blog post about Elixir basics for a Rubyist.

Since I was working full-time, I thought this would help cut down on the preparation time.

Step 3 – Slide preparation

For preparing the slides, I decided to use the Reveal.JS presentation framework.

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.

For images, it takes time to find them and format them. Two free services I like are unsplash for still photos and giphy for animated ones.

When I can’t find anything on either of those, I like to use Photodune for more professional images. 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.

Step 4 – Talk Preparation

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.

I also searched Google and found tips such as “delivery is more important than content from the Software Sustainability Institute website. That’s something I also learned from Toastmasters.

The next thing I did was rehearse the presentation after work a few times. This was important for a couple of reasons.

The first is timing. I time the talk to see if it’s approximately 10 to 12 minutes. Fortunately, it was within that time range.

The second thing is slide flow. What do I mean by slide flow?

Slide flow is how it looks to the audience. How do the bullets animate and pop into the screen? How do the images look adjacent to the text? Do I have too many bullet points on one slide?

What I Would Do Differently

So those are the 4 steps I used to prepare my first lightning talk. If I were to do things differently, I might try doing the following.

Lesson 1 – Try to pick a more technical topic that uses more Erlang type topics

I like to use talks as a vehicle for my own learning. Going forward, I would like to tackle more technical topics. For instance, I might give a talk that talks or uses a bit more Erlang concepts.

Lesson 2 – Try to have more highs and lows (“drama”)

The other thing I might do differently is to have more highs and lows in the talk. This would help create more “drama” within the flow of the talk. I’d like to think this would help keep the audience more interested so I don’t end up droning on and on.

Lesson 3 – Not go as fast and break down the content more

A couple of people said they found the talk a bit too fast-paced. I can believe this as I have a tendency to talk fast when I get nervous. I also thought the content was basic enough that I was worried people would get bored if I stayed too long on one slide.

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.

Summary

Giving a lightning talk comes down to preparation and audience engagement. I look forward to trying a few more and reporting on the results of the experiment.

4.2.3 Some Do’s and Dont’s of Networking at Technology Events

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.

Tip 1: Start with a Warm and Helpful Mindset

The best thing you can do when networking is to be genuinely warm and helpful if possible. So if someone needs help setting up chairs at a meetup, offer to see if you can help.

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. After all, nobody wants to work with someone who is unlikeable.

Tip 2: Building the Relationship: It’s All About Them, Not You

Just try to have regular conversations with people and be yourself. Don’t hit people up for jobs right off the bat. It’s better if you can find a way to segue there naturally. 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.

Tip 3: Be interested

Try to attend meetups with technology stacks that you are actually interested in working in. 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.

Tip 4: Play the long game

After a while, you might start to notice the same faces attending a particular meetup or event. This is what people mean when they say the “tech community is small”. This is why I encourage people to try and give lightning talks and/or start writing a blog.

Tip 5: Meet as many people as you can

While you’re bonding with people and forming connections, try to meet as many people as you can. As it turns out, more people find jobs through “weak ties” than close friends.

4.3 Other Ideas for Networking With Potential Job Leads

4.3.1 Online networking

Forums – I’ve also had success getting job interviews via online communities. For example, I was once part of an active online Ruby forum that had job postings.
Open source – Similarly, if you start a popular open source project, that could also lead to new opportunities.
Blog – A popular blog could also lead to new opportunities. I’ve heard John Sonmez of Simple Programmer talk about how his blog led to $300 per hour consulting gigs.
Podcasting – If you start a podcast, that could also be another great way to network with others. Charles Maxwood of the Ruby Rogues podcast is famous in this space for that reason.

4.3.2 Offline networking

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.
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.
Meetups – This is another great way to start connecting with familiar faces. By attending a specific programming language meetup regularly, I’ve been able to meet others this way.
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.

4.4 How To Increase Your Chances When Cold Applying to Jobs

I remember when I was first breaking into the technology industry, after my first job, I started cold applying to different companies. Sometimes it was through recruiters, and other times I did it myself. For the job search I did after my first job after working at a local university, I sent out roughly $ \sim $60-70 applications before I received an offer from my first startup job.

The next job hunt I did after that I sent out roughly $ \sim $25 applications before I landed a job.

4.4.1 The Secret System I Used to Make Cold Applying More Effective

So what changed? A few things changed for me. I practiced interviewing with friends. Plus, I also had more experience at demanding jobs which I believe made hiring managers more willing to take a chance on me.

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.

The McDonald’s Principle for Constructing an Application

Now before I tell you about what I did, let’s talk about McDonald’s. Have you ever stopped at a McDonald’s or other fast food joint? Did you stop there because it was the highest quality food you could find?

I bet nine times out of ten you were pressed for time and it was the easiest thing to grab for supper or lunch. In other words, it was convenient.

Now let’s imagine a hiring manager. They have their own team to manage, their own responsibilities, as well as building and scaling out a team. They’re pretty time crunched, wouldn’t you say? 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? If you said “yes”, you would be right. When you’re time-pressed, convenience is a really great benefit.

Applying the McDonald’s Principle To Replicate My Secret System

So how do you make it convenient for the hiring manager to look through your portfolio? There are really 3 easy steps you can follow.

Step 1 – Decide what projects / samples you want and show them in order of strongest to weakest

Now a sample can be a blog post, a piece of code, or ideally, a portfolio project. Let’s take an example of a list you might jot down:

Portfolio Project #1: jQuery plugin that changes the color of your navbar
Portfolio Project #2: Python project that scrapes facebook data
blog post about Python dictionary
Code sample of a command line script
The first jQuery plugin you wrote

So you can see I jotted down 5 items above in order of what might be strongest to weakest in a hypothetical lineup.

Step 2 – Now make a template document to point to these projects

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. When I was doing this I made a Word document and converted it to PDF.

This is because some job portals such as StackOverflow couldn’t accept multiple documents. So oftentimes, I would put the PDF, resume, and cover letter in one zip file. 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.

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.

Step 3 – Be efficient about personalizing the cover letter

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. Here is what I suggest: Make a stock cover letter with 2 or 3 key sentences that you can personalize.

For example, you might have a template such as:

To Whom It May Concern:
I applied to your company because I am interested in [fill in these technologies]. 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].

Now your cover letter will be longer, but the above example should give you an idea.

Step 4 – Tracking

The final piece of the puzzle to applying cold more effectively is to track your job applications. 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.)

This gives me a sense of how I’m doing overall. I tend to think of the job application process as a sales funnel where you’re selling yourself. I ask myself “is my conversion rate 10%, 50%, or 100%”?

Summary

So there you have it. 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.

Chapter 4.5 A Word On Warm vs Cold Applications

One reader asked me:

Should you try to find a job through connections or applications? Is there a middle ground? How do you obtain and maintain strong connections? And then, how do you use your connections to get a job?

It is always easier to find jobs through warm connections rather than a cold application. But let’s examine why this is. And along the way I’ll tell you the story of the Friendly Programmer (PP for short) and what that means.

Why It’s Easier to Find Jobs Through Warm Connections

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). That means when people refer someone they are risking their professional reputations on that reference.

So there is a strong incentive to get that reference right. 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. And reading research on perception, it’s been shown that people are biased by first impressions. And what better first impression to make than a positive reference form within the company?

But what if you have no references from within the company?

The short answer is you have to cultivate them. But how? Let me tell you the story of someone I’ll call Friendly Programmer. This is based on a combination of stories from various friends in the industry. I’ve changed some of the facts to protect identities, but the overall narrative is true.

Friendly Programmer (FP from here on out) graduated from a bootcamp and was brand spanking new to the industry. His resume didn’t say “MIT, Computer Science”. It said something more akin to “XYZ Bootcamp, 3 months experience”.

But 2 years later, FP had a job as a software engineer. How did this happen? FP started cold by submitting his resume to various companies. What happened? Rejection. So then FP began attending a local technology meetup. As it so happens, one of the meetup attendees was a hiring manager at the company FP had applied to earlier.

Now FP was by no means a rockstar programmer. He wasn’t a core contributor to a popular framework or library. He didn’t graduate from any place sexy like MIT or Harvard. But FP was very good at making friends. 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. 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.

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). It’s about how being involved in your technology community can lead to making friends. This can ultimately lead to you getting hired.

How to Maintain Professional Connections

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. But if you insist on working for a company, it is necessary lest you enjoy getting run over.

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. I have a Christmas card list in a Google Documents spreadsheet. But now I’m thinking about switching to a software based CRM system that I’m going to write myself.

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. That’s why I like setting up a CRM like system to enforce some regularity to it.

4.5 Epic Resources

see the Bonuses in Chapter cha:bonuses_experience

Chapter 5 Presenting Yourself As the Best Candidate For the Position

Have you ever seen the edible fruit baskets from Eddible Arrangements? I used to think who would want to pay extra money for a nice arrangement of fruit. Then I realized a fruit basket done like a flower bouqet makes a much better gift than a bowl of fruit.

But what does this have to do with you as a candidate?

If you recall from the previous chapter, we talked about helping time-crunched hiring managers navigate your portfolio and relevant experience. Now we’re going to dive into how to package yourself as the best candidate for the position.

According to research, it takes one tenth of a second for us to form a first impression of a person. So how do you make that first great impression now that you’re a candidate ready to be interviewed?

5.1 How To Make a Really Great Coding Project If You’re Asked For One During Later Interview Stages

Now suppose the company you’re interviewing with gives you an open-ended coding sample. In other words, you get to submit a project of your choice (this has actually happened to me). What’s the best way to get through this?

5.1.1 Step 1 – Thought Process

The first concept to understand is what I like to call a “thought process”. From a technical skills perspective, a hiring manager is looking for your skillset across 2 dimensions – the algorithmic dimension and the prototype dimension.

By algorithmic dimension I simply mean whether you can come up with an elegant step by step solution through code. By prototype dimension, I refer to whether or not you can ship a prototype app with a good user experience.

Different types of positions require different levels of facility with each dimenson. It really depends on the company and the hiring manager.

For example, a data engineer position might require more of an “algorithmic” thinking process. A good coding project to demonstrate this might be an URL shortener (there will be a mathematical component to this project).

This is different from a full stack developer position, which might require you to churn out app features really fast. In this case, a good project might be to do a leaderboard with a good user experience.

5.1.2 Step 2 – What To Do When You Don’t Know What They Want

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. I had submitted a sample coding project that had been well-received.

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

This made the candidate a no-hire.

But how do you know how to ask good questions to a prospective employer if you genuninely have a question?

I use a 3 step technique that I heard from some online entrepreneur like Ramit Sethi or Tim Ferris. I can’t quite recall at the moment. But it’s pretty easy.

The first step is to ask yourself the question. Next, come up with 3 answers on your own. Finally, ask the question to the prospective employer. 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.

5.1.3 Step 3 – A Good Readme

And now we come to the last step of pitching your coding project to the prospective employer – constructing a good Readme file. Now, why give them a Readme even if they don’t ask?

There’s a couple of good reasons. The first is that a well-written readme file shows how well you communicate. In today’s workplace of cross-functional teams, showing how well you communicate is a crucial soft skill. The other reason is that it’s a nice subtle way you to present yourself as the best candidate. It demonstrates a level of preparation and thoroughness that can help you stand out amongst others.

You can also use the Readme to show off how good your analytical thinking skills are. Let’s dive deeper into creating a kickass readme.

Format for a Kickass Readme File

Good grammar and spelling – The first thing you should make sure of is that your Readme file has good grammar and spelling. There was a study that showed the number one predictor of hireability [insert link] was the number of typos in your resume. And while there haven’t been any studies for readme files, I’m betting it applies here too.
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.
Step by step installation instructions – The third section is to have good step by step installation instructions. You want to make it easy for your interviewer to check out your work. If you’re doing a web application, I would seriously consider throwing in a link to a live demonstration of your work.
Approaches and tradeoffs – This last section is here to show your thought process regarding your solution. Like any situation you’ll run into in technology, you’ll likely have to make some tradeoffs. This section is a good chance to show your thinking behind that. It’s not about right versus wrong, it’s about clarity of thought.

An Example of a Good Readme

The University of Washington has a page with examples of good readme files from various homework assignments. Even though they are for assignments, they apply equally well to a portfolio.

Let’s look at the first readme example and what the author does well..

In addition to basically following the format for a kickass readme, the author includes a class hierarchy diagram. Now I love this! 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!

The author also gives an algorithmic analysis for their solution. This is another nice touch that could easily be added under the approaches and tradeoffs section of your own readme.

5.2 Demonstrating relevant expertise for your chosen technology stack

5.2.1 The Relativity Factor in Expertise and Why You Should Feel Encouraged

I remember when I first started learning a new programming language called Elixir. 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.

Then a coworker who was brand new to Elixir asked me to show him the ropes. It was at this moment I realized how much I had learned over the past couple of months. By comparision, I felt like an “expert”.

And if you think about it, this “relativity factor” applies to all kinds of expertise, not just programming. 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. But you might not feel like such an expert standing next to a famous major league baseball player.

And so it is with programming. 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.

Hopefully you feel a bit more encouraged about your prospects as a new programmer. 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”.

5.2.2 Honing in on the skills you can control to demonstrate relevant expertise

Below are some crucial skills that you can focus on for your first job.

The power of Git

Every company that employs software developers uses some form of version control (or at least every company that would give you valuable experience). Today pretty much everyone uses Git for their version control. So while I will soon be writing a mini-guide on the basics of Git version control (sign up here if you’re interested), in this section I’ll briefly list some of the version control skills you should be comfortable with.

Branching – You should be able to check out branches and then merge them back into master.
Track remote branches – You should be able to check out branches and ensure they are tracking remote upstream branches.
Pushing – You should be able to push your changes up to your companies hosted Git provider (typically most companies use GitHub.com).
Merging and rebasing – You’ll need to be able to merge and rebase.
Diff – You’ll need to be able to see the changes you make. “git diff” allows you to do this.
Team-based git workflow – If you are not familiar with how teams use Git, I suggest you read this post.

Tooling for your particular technology stack

Right now, JavaScript is all the rage. So if you’re going to be a front end JavaScript developer, you should learn the modern JavaScript/front end tooling and workflow. Right now that involves things like webpack, grunt and/or gulp task runners, npm, yarn, and the new ES6 (Ecmascript 6) syntax.

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.

If you have a different technology stack other than Ruby or JavaScript, there’s probably a standard suite of tools you should learn.

Text Editor Skills

When you’re just starting out, one common question that seems to arise is “Does it matter whether I use Vim, Sublime, or Atom?” (or emacs or whatever the hot text editor is). I started out by using Sublime. One of my former bosses used Textmate. I would argue it doesn’t really matter what text editor you use when you’re first starting out. 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):

Fuzzy file finding – With a few keystrokes, you should be able to find a file by name very easily.
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).
Easily navigate through a file – Be able to jump down a few hundred lines with a few keystrokes.
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.
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). It’s like a visual “git diff”.

Navigating the command line

Most startups I’ve worked at provide you with a Mac OSx laptop. I’ve also found most open source technologies such as Python, Ruby, or JavaScript tend to be developed towards a Linux bias. 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).

Knowing where to get answers

It’s also helpful to stay aware of the tools in your community and what the latest upcoming stuff is. I like to scout out newsletters and read those to stay up to date. For example, in the Ruby and JavaScript spaces, Ruby Weekly and JavaScript Weekly

I also like to join community forums (or slack or irc channels) and stay involved there as much as I can. And of course, local tech meetups are a great way to keep your finger on the pulse of the community you’re involved in.

5.3 Another Way To Demonstrate You’re Job Ready: Open source contributions

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. Another possible way forward is to get involved in open source.

Why get involved in open source? It’s a great way to show that you can collaborate with others. You’ll also likely get to learn the nuances of the particular language that open source project is written in. 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). So if I’ve sold you on working on open source, read on.

5.3.1 How to Get Involved in Open Source If You’re a Total Newbie

Bundler open source contributor Andre Arko did a great talk at RubyConf 2016 about how to get involved in open source in just 15 minutes a day! Here are some highlights (though I highly suggest you watch the talk if you want to take this route):

step 1: wtf (what is happening in the project? Read the changelog, readme, etc., open the github issues – read every comment, problem, every person that doesn’t understand what is happening, etc.) – so on Rails, it might take you weeks to read every single issue at 15 min/day (Steve Klabnik did this);
step 2: answer questions – now you can answer the questions you know the answer to from step 1
step 3: help with issues – you now have the context to help fix some of the problems (bug reproduction steps)
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)
step 5: writing patches
step 6: improve everything – once you have enough experience to do things, you start noticing all the problems you to make better
step 7: you’re doing it! – if you do this you’ll probably be on the core team because you’re making the project run
step 8: now you’re in charge (congrats and condolences)

5.3.2 Showcasing Your Open Source Contributions

Remember the application template we made following the McDonald’s principle to make it convenient for the hiring manager to look at your work? This is a great place to add links to the actual pull requests that showcase your ability to make open source contributions.

Here’s an example of a change I made to a gem called obfuscate_id that I linked to in my application template when I applied to various jobs.

5.3.3 Contribute to Something the Company Built

Another way to get involved in open source is to try and contribute to an open source library a company has built. It would be similar to the patch I made to obfuscate_id that I talked about in the previous section. Or you could contribute to a framework that the company uses.

For example if a company uses Ruby on Rails, you could contribute to Ruby on Rails.

5.4 What to Expect in a Tech Interview?

I’ve interviewed at quite a few different places now. Here’s what to expect.

5.4.1 Stages of an Interview

Pretty much every coding job follows roughly the same series of interview steps. There’s the initial phone screen (“gatekeeper stage”), technical phone screen, coding project, and on-site interview.

Stage 1: Gatekeeper Phone Screen

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.

As a side note, you should try to avoid talking about salary at all until they’re ready to make you an offer. 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.

Stage 2: Technical Phone Screen

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.

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

Stage 3: Coding Project (sometimes optional)

The next stage, which sometimes startups skip, is a take home coding project of some kind. Sometimes the parameters are well-defined, and other times it’s an open ended coding challenge.

The idea here is the company wants to get a sample of how you approach a simulated “real-world” coding problem. 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.

I actually have a whole webinar devoted to talking you through how to approach a coding sample project.

Stage 4: On-site Interview

Congratulations if you’ve made this far! At this point, it’s about culture fit and the company making sure they didn’t miss anything about you. Now they’ll be sussing out if they can work with you on a social basis.

5.4.2 Types of Questions You Can Expect Throughout the Interview Process

We’ll be covering interviewing in the next chapter, but to here’s a rundown of what you can expect.

Algorithmic Questions – In general, I’ve almost always had to answer algorithmic type questions. You’ll sometimes hear people refer to this derogatorily as “whiteboarding”. 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.
Basic knowledge questions related to your tech stack
Behavior/culture questions

Now, we’ll cover interviewing in a later chapter but I wanted to give you an overview here.

5.5 A Winning Resume

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. This article from careercup.com gives some great tips for a winning resume. A one page resume with brief accomplishment-oriented bullets is the way to go.

You do want to make sure you proofread your resume (and hopefully get another set of eyes on it too). According to Aline Lerner, 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. NOT personal projects. NOT GPA. NOT a Computer Science degree from a top school. It’s an interesting read if you have time, but the point is, double check your resume!

5.6 Epic Resources

see the Bonuses in Chapter cha:bonuses_experience

Chapter 6 How to Prepare for An Interview So You Look Like the Best Job Candidate

First impressions do count. Don’t believe me? Here’s what the undercover recruiter has to say:

When meeting new people, 55% of the impact comes from the way the person dresses, acts and walks through the door. 33% of bosses know within the first 90 seconds of an interview whether they will hire someone. The number one most common mistake at a job interview is: failing to ask for the job.

6.1 Basic Algorithm Interview Questions w/Solutions

6.1.1 Sample Algorithm Questions

I compiled a list of 10 sample algorithm questions. Some of them are twists on questions I have actually encountered during the interview stages. You can find them here

6.1.2 Where to go for more algorithmic practice

Here’s a list of interactive coding challenges that will let you practice. 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.

HackerRank – This is an interesting site which although I haven’t used I’ve heard good things about. You can do problems and if you score well enough, companies use it as a recruiting tool.
Codefights – A site similar to HackerRank which I also haven’t tried yet.
Topcoder – Topcoder is a site I enjoy because of their “match editorials”. You can participate in algorithm challeneges and you can get solutions to the problems you don’t understand. The only thing is that there are only 4 languages represented: Java, C++, Python, and VB.net.
Codewars – This is somewhat similar to Topcoder but with a larger variety of programming languages.
Project Euler – So Project Euler is a fun little site that gives you mathematical programming challenges. The challenges get progressively harder.
Leetcode – A programming interview question site. I’ve heard good things about it but haven’t tried it.
Interview Cake – Another programming interview questions site. I’ve heard good things about it but haven’t had a chance to try it yet.

6.1.3 Why should I care about these algorithmic puzzles even if I don’t use them daily?

There’s been a bit of a backlash against what’s known as “whiteboarding”. 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. For example, you might be asked at a Google interview:

How many trailing zeros are in the number 5! (5 factorial)?

Your actual use of this knowledge in your day to day would probably be zero. But the main reason you should care about these puzzles is that companies still use them as interview questions.

6.2 Basic Knowledge Interview questions & Strategy

Chapter 3 has a list of front end and back end interview questions I think you should review. What I’d like to focus on is a strategy for dealing with questions you don’t know the answer to.

6.2.1 How to handle a question you don’t know the answer to…

As you do more interviews, this will happen more to you. My first piece of advice is whatever you do, do not lie. Don’t try and bullshit your way out.

6.2.2 Case 1: You think you might know but you’re not sure

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?”.

6.2.3 Case 2: You really have no clue

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?” This shows the interviewer you’re at least honest, and willing to dive in with them to solve the problem.

6.3 Behavioral Interview Questions

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. After all, why ace the technical portions only to have a hiring manager decide to pass because you flubbed a behavioral question?

There’s plenty of books like this one that cover basic interview questions, so I won’t try to cover them all. Instead, I’ll try and cover the basic ones that trip people up.

6.3.1 A List of Common Behavioral Questions That Trip People Up

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). This doesn’t mean you lie, but it does mean you should be prepared to tell white lies or “gloss over” the whole truth.

If this feels “icky”, I feel your pain. 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). Usually, you’ll reply with something like “I’m fine”.

And so it must be with your interviewer. Think of your interviewer as a first date where you want to make a good impression.

1 – Why are you leaving your current position?

Ah, this is a tricky one. The best answer (if it’s true) for leaving is that your company is laying off people or in some kind of financial trouble.

Unfortunately, sometimes you may be leaving because of a horrible boss, co-worker(s), or some combination thereof. In which case, you can’t say that (I know, this is where you need to wade through the “ickiness”). Remember our rule about being positive?

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.” Ideally, you should be able to back up your statement with a fact if your interviewer probes further.

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.” 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. It’s a bit of a balancing act. You get better at it as you go through more interviews.

2 – Why do you want to work here?

This is the flip side of “why are you leaving?”. The best answer should be specific and related to the company’s interests. For example, you might answer “I want to work on Ruby on Rails applications in the entertainment industry”. 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. Here is how my skillset can help…

3 – Tell me about yourself

This is not a place to tell your life story. 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. I usually start by framing the discussion by saying something like, “Sure, let me talk a bit about the projects I’ve worked on. Please feel free to stop me if you have any questions.”

Then I talk about the projects I’ve worked on and the results that were achieved.

4 – What is your greatest weakness?

Ooh, this has always been a toughie. You don’t want to say anything too damning (“I’m incredibly selfish and greedy”). But you also don’t want to look like you’re blowing off the question.

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.

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. 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.” Notice 2 things. The first is that I showed improvement in an area of weakness (a positive) rather than reporting an actual weakness. 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).

If you’re trying to answer the weakness with a “pivot”, then you might answer with something like “I look forward to working with

5 – What would you say your favorite part of working in a team is?

The wrong answer to this in 99% of cases is “I prefer to work alone”. Almost all software development is done in teams these days with multiple stakeholders – ranging from project managers to fellow software developers. The answer I personally give is that you can get a lot more done with a team than you can by working solo. 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).

6 – Why do you want to work remote?

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”. The general principle when answering interview questions is to give answers that show how you are going to benefit the business.

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”.

6.3.2 Practice Interviewing with friends

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. 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.

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

Construct your personal narrative

If you’re transitioning from another field, it’s helpful to come up with a personal story. The narrative should answer the following questions.

1 – Why are you transitioning to web/mobile/software development? 2 – How did you get started? 3 – How does your previous experience translate into value for our company?

So if you’re a teacher transitioning to web development, you might tell the story of how you started building things for your students. You might have started with Excel but you decided to build your own web application because you wanted login functionality and separate accounts. Then you got so interested you kept building more web/mobile projects.

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.

Boom, done!

6.4 List of Resources for Preparing for a Tech Interview

Whew, you’ve prepared your portfolio and done what you can to stand out from other candidates. It’s now time to start applying.

6.4.1 Target your companies

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. Using the tracking template provided, start making a list of companies.

6.4.2 Resources for Preparing for a Tech Interview

Below are books and websites you can use to prepare for a technical interview. I culled it from this exhaustive list and my own research.

For those who are time limited, I’ll give you a time crunched set of resources.

Books

6.4.3 Websites

Here’s a list of interactive coding challenges that will let you practice.

HackerRank – This is an interesting site which although I haven’t used I’ve heard good things about. You can do problems and if you score well enough, companies use it as a recruiting tool.
Codefights – A site similar to HackerRank which I also haven’t tried yet.
Topcoder – Topcoder is a site I enjoy because of their “match editorials”. You can participate in algorithm challeneges and you can get solutions to the problems you don’t understand. The only thing is that there are only 4 languages represented: Java, C++, Python, and VB.net.
Codewars – This is somewhat similar to Topcoder but with a larger variety of programming languages.
Project Euler – So Project Euler is a fun little site that gives you mathematical programming challenges. The challenges get progressively harder.
Exercism.io – 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. It’s like free code review.
Leetcode – A programming interview question site. I’ve heard good things about it but haven’t tried it.
Interview Cake – Another programming interview questions site. I’ve heard good things about it but haven’t had a chance to try it yet.

Books and Websites for the Time Crunched

If you’re hurting for time because you’re working full-time, I suggest you only review the following:

Cracking the Coding Interview: Gayle Laakmann McDowell
Choose to do one problem a day from one of Topcoder, Leetcode or Interview Cake.
If you bomb an interview question, always figure out the answer to it.

These are the 3 things I have done when I was time crunched.

6.5 Handling Rejection

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. So here is how you handle turning lemons into lemonade.

6.5.1 Lemons into Lemonade – Getting Feedback After the “No” During a Job Search

You’ve been searching hard. You’ve done multiple interviews during the course of your job search and possibly have gotten a couple of job offers. But when someone rejects you it can still taste like you’ve swallowed a lemon.

My mom always told me to turn “lemons into lemonade.” Yeah right, there are few things that feel worse than a job rejection I can hear you saying.

But all is not lost

You can still make the most of the rejection if you implement the following steps during your job search. 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.

Step 1 – Say Thank You & Keep Doors Open

Don’t pout. Don’t whine. These are things my parents used to say and their words would serve you well here. I like to say thank you for their consideration. The high road is always a winning road.

Step 2 – Asking For Feedback After Thanking Them

After saying “thank you”, then I like to ask them for feedback. But there is an important thing to do when you ask…

Reassure you’re not going to rationalize or argue

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

Say thank you for the feedback

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.

Step 3 – The script template for your own use

Below is the script I use in response to an email rejection from a hiring manager. Feel free to adapt it using your own style of speaking.

*Dear [Name of Hiring Manager],

Thank you for letting me know. I wish you and [Company of Hiring Manager] the best.

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. Please understand that I’m asking for help here, not trying to rationalize or rehash my case. I’m just trying to make myself into a stronger candidate for the future.

Best of luck to you and [Company of Hiring Manager]!

Sincerely,

[Your Name]*

Step 4 – The script for a simple thank you after you’ve gotten the specific feedback

*Dear [Name of Hiring Manager],

Thank you for the specific feedback! I wish you and [Company of Hiring Manager] the best.

Sincerely,

[Your Name]*

My own results

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. 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.

So try asking for feedback the next time you’re rejected. You might be pleasantly surprised at how you turned lemons into lemonade.

6.5.2 Tracking your effectiveness as a candidate

One thing that helped me initially was tracking the state of where I was in the job interview process. By having this historical data, it let me see how much I was improving year after year.

How many jobs should you apply to? 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. In fact, I think I found my first job through a recruiter.

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. Track according to how far you get into the interview process. In other words, track whether you even got an initial phone screen, technical screen, and on-site interview.

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

6.5.3 Why You Must Keep Hustling Until You Have An Offer Letter

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. Let’s face it, a rejection can feel like someone telling you “you’re not worth it”. There are of course many reasons why you may not get hired that are behind the scenes that you may never know about it.

It could be that the boss’s nephew needed a job. It could be a more experienced candidate who was willing to work for less pay came along (H1-B visas anyone?).

This is why you need to keep hustling until you have an offer letter (or 2 or 3). 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.

It’s a psychology thing. So keep hustling.

6.6 Polishing Your Code So You Look Like a Professional

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. If you know a good senior engineer from all those local meetups you’ve been attending, you can ask them.

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.

6.7 Resume Review and Other Tips

Get a friend or other 3rd party (say a front end or back end engineer) to review your resume, especially for typos. Alie Lerner wrote a post showing that typos in your resume mattered more than any other factor when it comes to hiring.

Also, don’t forget to line up 3 professional references before getting the offer letter. 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.

6.8 Epic Resources

see the Bonuses in Chapter cha:bonuses_experience

Chapter 7 Bonuses To Help You Get That Job

So I made this portion of the guide to give you shortcuts to good resources that will help you on your job search. It’s done by chapter.

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.

7.1 Chapter 1 Epic Resources: How To Make a Portfolio That Will Make Interviewers Want To Setup a Time To Meet You

7.1.1 Ultimate Portfolio Checklist

This is a checklist to help you ensure you have a great portfolio to show off!

Testimonials – You have collected 3rd party proof to show how great you are to work with using the questions provided in Chapter 2?
Projects – You have projects that show you are a good fit
Proof that that you’re capable of learning on the job – Are any of your projects using the latest web technology?
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?
Adopt the Google PageSpeed Insights recommendations and try to get your score up to 90% for both mobile and desktop.
Make your portfolio easy to navigate – Keep in mind a hiring manager has limited time to browse your portfolio. So make it easy to navigate (on mobile and desktop).
Your site looks good on a mobile device?
Great UI elements and design?
MVP Portfolio with 6-8 projects?
Focused projects in your portfolio that match your specialization?
Blogging – As if all the above is not enough work, I also advise people to start blogging about what they learn. For people with full-time jobs who are learning to code for the first time, I realize this can sound onerous. But blogging about you learn can be a great strategy. 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.

7.1.2 Technical Resources for Constructing a Portfolio

Namecheap – With Namecheap you can register domain names for your portfolio such as “mary-has-an-awesome-portfolio.com”. I’ve been using them for years and have been quite happy.
Digital Ocean – I use Digital Ocean to host my blog. It’s pretty friendly for developers. If you just need a low-cost portfolio, I recommend using GitHub pages which I cover in Chapter 1.8.

7.2 Chapter 2 Epic Resources: Skills

One of the things that a lot people new to the industry complain about is the extensive interviewing process. Below is a list of resources that you will find helpful.

I broke it out into 2 sections. One is “coding interview preparation” and the other is “practical preparation”. 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.” 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”.

7.2.1 Coding Interview Preparation (Whiteboarding)

7.2.2 Practical Preparation (Skills You’ll Find Useful Day to Day)

Upcase – 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”. They also have courses in particular subject areas such as Vim. 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.
Egghead.io – Egghead is great because they have high quality content on front end topics such as React and Webpack. They often have courses taught by the creators of the frontend tools and frameworks. For instance, Dan Abramov, the creator of Redux, has a course on there called getting started with Redux.

7.3 Chapter 3 Epic Resources: How Do You Get a Job That Requires Experience When You Have No Experience?

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.

Here’s a free contract template for freelancers.
Freelancers’ Show – 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.
Freshbooks – This handy web application lets you track your time and easily bill your clients.
Trello – Trello is a user-friendly project management tool. I actually use this to manage my personal projects, but I have used it a bit for managing client projects if memory serves correctly. I have also used Basecamp as well and that’s another good project management tool. In reality, there are dozens out there, so you should just pick one to start and change if needed as you keep on freelancing.

The post The Ultimate Strategy For Creating a Portfolio That Says “Hire Me” appeared first on BinaryWebPark.

The Elixir Pipe and Capture Operators

Bruce Park — Tue, 16 Jan 2018 06:00:01 +0000

The Elixir Pipe and Capture Operators

When I first came across the use of the elixir pipe (“|”) and capture (“&”) operators in Elixir, I experienced confusion at first.

I think part of the confusion is because the capture operator is used to convert a function into an anonymous function. It is also used as a “value placeholder”.

The pipe operator acts similar to the pipe operator in Unix in that it passes the result of an expression on to another expression.

Case 1: Piping one argument

Here you can see I’m piping in a list into Enum.map/2 and

[1, 2]
|> Enum.map(fn(x) -> x * 2 end)

Now Enum.map/2 has an arity of 2, meaning it takes 2 arguments. So you could write it out as:

Enum.map([1, 2], fn(x) -> x * 2 end)

Case 2: Piping an argument that is not the first argument to another function

In the command function, you’ll notice I want to pipe an argument into add_code but as its second parameter. Below is how I do that.

You can see I use the capture operator to define an anonymous function with an arity of 2 and pass in the 3 as the rightmost argument.

defmodule X do
  def command(code \\ 2) do
    3
    |> (&(add_code(code, &1))).()
    # output here will be 5 if code is set to 2
  end

  def add_code(code, y) do
    code + y
  end
end

Case 3: Piping an argument to a core library like Enum

Below I’m passing a list into Enum.filter/2 and filtering out only the true values (in this case the number 2).

You’ll notice I’m using the “&” operator to define an anonymous function to “filter” the values. If we were to expand that function it would read fn(x) -> x end.

def commands(code) do
    [2, false]
    |> Enum.filter(&(&1))
    |> (&(reversal(code, &1))).()
  end

Case 4: Passing Named Functions as Arguments

You can see in the below function that pairing a named function and arity with the capture operator results in an anonymous function. In this case, IO.puts ends up being that anonymous function.

Enum.each([1,2,3], &IO.puts/1)

Case 5: Capture with Anonymous functions

You’ll notice below I show 2 ways of defining an anonymous function.

volume = fn(x, y, z) -> x * y * z end
volume = &(&1 * &2 * &3)
volume.(1,2,3)

Summary

Hopefully, you learned a little bit about how to use the capture and pipe operators together. If you’re interested in further reading, this post by DockYard has some nice diagrams and this post has a nice little write-up.

The post The Elixir Pipe and Capture Operators appeared first on BinaryWebPark.

Common New Web Developer Questions and Answers

Bruce Park — Tue, 02 Jan 2018 06:00:43 +0000

Common Questions By New Web Developers

Last updated 4/29/17

So lately, I’ve been answering questions from folks new to the web development field. So I decided to jot down these questions and answers.

In most cases, I’ve changed names and rephrased things so they read more clearly.

Question 1: When are you ready to contribute to other open source projects?

Here’s the expanded question:

*Hello friends ! I’ve been learning to code for 3 months now, and I’m still trying to master CSS. As an example, today I’ve been re-making flat login forms and flat pricing tables.

My Question is: When do you think would I would be ready to contribute to other’s projects like on GitHub & other groups challenges? Thank you. -John*

Here’s my answer:

Hi John, I don’t think there’s a certain “threshold” of when you’re ready. It depends on the project and your level of knowledge regarding the project.

As a quick example, when I first started trying to contribute to an open source project, I picked out a project and started reading the documentation and noticed there was a link that needed fixing in the documentation so I fixed that. I wasn’t familiar with the entire codebase so it would have been extremely hard to make a “code contribution”. So I looked at the issues and fixed something I could.

I recently saw a talk where the speaker said to contribute to an open source project, you should first start by understanding all the issues/README/etc. Then there are some other stages to go through (like being able to answer other people’s questions). Depending on how much time and knowledge you have already, it may be a while before you can make sizeable contributions. It depends on how much time you have and your situation. Hope this helps!….Here is the link to the talk for reference: https://www.youtube.com/watch?v=6jUe-9Y__KM.

Question 2: Can you recommend an easy tutorial on submitting a form via AJAX?

Here’s my answer:

This tutorial at tutsplus will work (assuming you have jQuery and your backend is php).

Are you new to ajax? The thingsto keep in mind is that in ajax you will need to specify an http path to the backend portion of your server that is handling the data submitted by the form…..

Question 3: Do you have any advice for someone totally new to coding trying to teach themselves?

Here’s my answer:

I think there’s 2 parts to this answer. The first part is to keep doing projects so you keep learning. If you’re really new, then trying to churn out as many side projects as you can can be helpful for acquiring new skills rapidly.

The second part is to setup a routine. Having structure and accountability (self or otherwise) can help you keep learning continuously. This is especially helpful if you can’t devote yourself full time (e.g., you have a day job). This is where bootcamps can be helpful because they are totally immersive.

Question 4: How do you make time to practice? I have a full time job and 2 kids and find my biggest hurdle is finding time to practice and then retain the information…

Here’s my answer:

The short answer is to have a goal, a plan to achieve it, and a systematic routine for doing it (please use a calendar).. If you’re having trouble retaining information, you should jot down the issues you’re having trouble with and write down answers as you find them. Then periodically review them.

I wrote about my system for planning side projects in this post and this post about completing side projecs.

Question 5: Can you kindly give me a list of math courses I need to learn in order to be proficient in computer science and coding? I’m about to go for a software engineeing certification and the tutor told me it’s very mathematically based.

Here’s my answer:

Off the top of my head the most relevant mathematical topics for Computer Science are:
– Discrete Math and Graph Theory/Combinatorics. These both usually get covered (at least implicitly) in Algorithms and Data Structures type classes for the most part.
– Algorithms and Data Structures
– Calculus, while a university requirement, has never really been necessary in practice (at least in the Algorithms classes I took, and I’ve taken Stanford’s online courses).

Question 6: Can you explain what Github is? I’m not quite sure what it is and for what projects it could be of use.

The simplest one line explanation I can think of – Git is the “version control system” with a “command line interface”. GitHub is really just a nice web interface over it that lets you casually browse through all your Git version controlled projects.

Summary

The above are questions I’ve seen or answered by people entering into the new web development field. I hope to update this list periodically.

The post Common New Web Developer Questions and Answers appeared first on BinaryWebPark.

Pattern Matching in Elixir

Bruce Park — Tue, 19 Dec 2017 06:00:56 +0000

Pattern Matching in Elixir

Pattern matching is a phrase you hear thrown around a lot as you get started in Elixir. But what is it exactly and how do you use it to write elegant code?

If you start to see the following use of “cond” blocks in your code, it’s a sign you might need some pattern matching. The below code shows signs of needing some pattern matching.

def compare(a, b) do
  cond do
    a === b ->
      :equal
    sublist?(a, b) ->
      :sublist
    sublist?(b, a) ->
      :superlist
    true ->
      :unequal
  end
end

= is the first thing to understand

The first thing to understand is that the equals symbol (“=”) is a match operator. If you come from an object oriented language like Ruby, you may think of it as an “assignment operator”, but that’s not how it’s referred to in Elixir.

Pattern matching with recursion

The other neat thing about Elixir is that it allows you to pattern match on a list using recursion. Perhaps it’s best to start with a code sample.

defmodule Calc do
  def triple([head | tail]) do
    [head * 3 | triple(tail)]
  end
  def triple([]), do: []
end

iex> Calc.triple([2,4,6])
[6, 12, 18]

The triple function triples each element in a list. You’ll notice it’s done by “pattern matching” on the head of a list and then calculating the triple of the tail in the above code example.

Using the _ operator to match anything

A lot of times in Elixir code, you’ll get back the status of some function call. For example, if successful, the following code returns something like *{:ok, #}*.

For example, the code below does exactly that if successful.

{_, pid} = Supervisor.start_child(__MODULE__, [id])

Pattern Matching Through Functional Arity

Now in Elixir, you can’t match by data type because it’s a dynamically typed language. So one way you can pattern match is by functional arity. Functional arity refers to the number of arguments in a function.

Thus, in the below code, you can call sum with 2 or 3 numerical arguments and still get back a correct result. This is thanks to pattern matching.

def sum(a, b, c), do: a + b + c
def sum(a, b), do: a + b

Pattern Matching By Exact Values

The other thing I’ve done is pattern match by exact value. Here’s an example:

def operation(true, a, b), do: a + b
def operation(false, a, b), do: a - b

So now depending on the boolean value I pass into the first argument of the operation function, I get back either the sum or difference of the values of a and b.

Pinning a variable

Recently, I learned about pinning variables. Sometimes we don’t want to use the “=” operator to rebind a value to a variable. Thus, we can use the pin operator to pattern match on the existing value of the variable. Here’s a code example to show what this means in practice.

We bind a value of 5 to x, then try to pattern match on 6. We get a MatchError.

x = 5
^x = 6

** (MatchError) no match of right hand side value: 6

The order of functions matters

If in an Elixir code base I had function 1 above function 2, I would never actually get to function 2 if a token were nil. That’s because the order in which functions are defined in Elixir matters.

def ops(%{part: "snippets", token: token}), do: IO.puts "non nil"  #function 1
def ops(%{part: "snippets", token: nil}), do: IO.puts "nil"  #function 2

So if I were worried about getting burned by a nil token, I’d need to swap the order of function 1 and 2 above.

You can use guards too

If I had a guard via the “when” clause checking if token was nil, then I could leave function 1 above function 2 and achieve the desired outcome.

def ops(%{part: "snippets", token: token}) when is_nil(token), do: IO.puts "non nil"  #function 1
def ops(%{part: "snippets", token: token}), do: IO.puts "nil"  #function 2

Summary

And there you go. The above cases are some ways you’ll pattern match in Elixir.

The post Pattern Matching in Elixir appeared first on BinaryWebPark.

Vim Tutorial – Day 3

Bruce Park — Tue, 05 Dec 2017 06:00:50 +0000

Vim Tutorial – Day 3

In the last Vim tutorial post (see Day 2), I covered how to use Vim’s built-in help menu to get more mileage out of Vim.

In this post, I’m going to introduce some more advanced commands.

Vim as martial arts

Like I mentioned in my Day 1 post about Vim, watching skilled Vim users is akin to watching skilled martial artists.

It’s amazing and yet also a little bit intimidating, especially if you’re new. When I started, there are things I wish I knew. So I’m continuing to write this tiny Vim tutorial to help you get started.

To get their advanced skills, martial artists often train through the use of exercises called katas.

So I’m calling these Vim exercises kata after those simple karate exercises designed to train the mind and body for specific applications.

Move 1 – Joining Lines Without a Space

You can join multiple lines without a space in Vim. For example, let’s say I have the following 5 lines.

If the cursor is position on the number 1 and I then type 5gJ, I get the following output:

Kata Steps:

Open up Vim. You should be in normal mode by default.
Type 5gJ, 4gJ, etc. depending on the number of lines you want to join without a space.

Move 2 – Substitutions Using Vim Regex

You may find yourself wanting to occasionally format a bunch of lines the same way. For example, perhaps you’ll want to change the lines in Block 1 so they look like the lines in Block 2.

Block 1

1,15.1%,good
2,29.8%,bad
3,31.5%,bad

To this:

Block 2

1,.151,good
2,.298,bad
3,.315,bad

To do that you can use a combination of substitution with Vim regular expressions. In command mode, enter:

:%s/\(\d\+\)\.\(\d\+\)%/\.\1\2/g

You’ll notice you have to use the “” to escape a lot of the regex characters. The “\1” matches the first group of digits before the period, and the “\2” matches the second group of digits after the period.

Kata Steps:

In Vim normal mode by default, change the lines you want using substitution and regular expressions.
Be prepared to figure out which special characters you need to escape.

Move 3 – Very Magic mode

I recently learned that Vim has four different modes of regular expressions that affect which special characters need to be escaped. Previously, I would have to remember to escape certain characters in regular expressions that I used in Vim that I wouldn’t have to in Ruby or Perl. Move 2 shows you the complications this can have.

That’s why I was grateful to have found very magic mode in vim. You can type :help magic in Vim for more details, but basically it means I can use regular expression syntax that I’m used to.

Let’s say I wanted to change Block 3 to Block 4.

Block 3

1,15.1%,good
2,29.8%,bad
3,31.5%,bad

Block 4

1,.151,good
2,.298,bad
3,.315,bad

I would normally use the regex substitution in Move 2. But with very magic mode I can do this:

:%s/\v(\d+)\.(\d+)\%/\.\1\2/g

Kata Steps:

In Vim normal mode by default, change the lines you want using substitution and regular expressions.
Use the magic mode modifier \v in your regex.

Move 4 – Use a special register for the next yank/delete/etc

So let’s say I want to swap the 5 and 2 in Block so it appears as in Block 6.

Block 5

2,3,5

Block 6

5,3,2

One way to do this is to do a basic delete and paste and assiging the result of each delete into a different register. To do this you use the ” followed by a register which can be any of {a-zA-Z0-9.%#:-“}. You can type :help “ to see the full help description.

For example, move your cursor over a character you want to delete. If you want to store the it in register c, you would type: “cx. Then to paste from register c, you would type “cp.

Kata Steps:

Move your cursor over a character you want to delete. If you want to store the it in register t, you would type: “tx. Then to paste from register t, you would type “tp.

Summary

Hopefully, the above “katas” will help you in Vim. Being able to use regular expressions and special registers will greatly aid your productivity.

The post Vim Tutorial – Day 3 appeared first on BinaryWebPark.

BinaryWebPark

Common Gotchas For Elixir Newbies

Common Gotchas For Elixir Newbies

Gotcha 1 – Pattern matching – top down order

Gotcha 2 – The double backslash in function parameters

Gotcha 3 – Piping to an anonymous function

Gotcha 4 – Piping an argument that is not the first argument to a function embedded as an anonymous function argument

Gotcha 5 – Piping an argument that is not the first argument to a function

Gotcha 6 – Nested case smells

Gotcha 7 – Using cond instead of pattern matching or case

Gotcha 8 – No custom functions in guards

Gotcha 9 – You don’t assign, you bind

Gotcha 10 – A for is a comprehension, not a loop

Footnotes

Storing JSON Blobs in Amazon S3 With Elixir

Storing JSON Blobs in Amazon S3 With Elixir

JSON Blob Experiment

Step 1: Create Mix Project with ex_aws

Step 2: Module to Generate the JSON records

Step 3: Module to Write to AWS

Step 4: Set Up Your AWS Keys

Step 5: Run Your New Program

Summary

Untangling Nested Case Statements Using The With Statement in Elixir

Untangling Nested Case Statements Using Elixir’s With Statement

What is a nested case statement?

So, what is wrong with a nested case statement?

Point 1 – Readability

Point 2 – Maintainability and Adding New Features

An extreme example for clarity

Syntax of a with statement

Advantages to using with

A Word on Elixir versions

Summary

Footnotes

The Best Blog Posts for a Rubyist Learning Elixir

The Best Resources and Blog Posts for Learning Elixir (for Rubyists)

Philosophy

Interviews with Jose Valim

Basic Syntax

Tutorials

Supervisors

Processes

Performance

Books

Other Resources

Basic Linux Commands – Part 1

Basic Linux Commands – Part 1

History & Date

Navigations

Exploring the system

Manipulating files and directories

Some more helpful terminal bits

Summary

The Ultimate Strategy For Creating a Portfolio That Says “Hire Me”

The Ultimate Strategy For Creating a Portfolio That Says “Hire Me”

A Guide for New Web Developers

Bruce Park

Contents