A quick test to determine whether a site is responsive or not is to resize your browser window. Does the layout noticeably change? If it does, it mights the website design is responsive.

Try resizing the browser window on these sites:

• Barack Obama
• Bootstrap
• The Boston Globe
• ZURB

Media Queries

You've probably heard of CSS Media Queries before. Media queries allow developers to conditionally deliver CSS:

@media print {
  .no-print { display: none; }
}

The above snippet will hide elements with class no-print for visitors printing out a website. These elements will still be present on the screen.

Turns out, media queries can use the device width as a condition:

@media screen and (max-width: 320px) {
  /* targets screen widths <= 320px */
  .desktop-only { display: none; }
  .mobile-only { display: block; }
}

@media screen and (min-width: 321px) and (max-width: 500px) {
  /* 321px <= screen width <= 500px */
}

min-width and max-width are the most widely used for responsive web design, but there are a few other useful ones:

• orientation, which can be portrait or landscape
• aspect-ratio, a width to height ratio in this format 1280/720
• color, device bit depth

The Viewport

Although a mobile phone's screen size may be 320px wide, it still tries to render a scaled down version of the page at 980px. For example, the New York Times will render on mobile phones as it does on desktops — just with everything scaled smaller.

In order for media queries to work correctly, you'll have to force the browser to render a non-scaled version. This can be done with the meta tag:

<meta name="viewport" content="initial-scale=1.0,width=device-width" />

The above says don't try to scale this website and use the exact device width for rendering. Now our media queries will work as expected.

Flexible Layout

I tend to use CSS inside max-width media queries to override a site's default CSS. A common approach is to have a fixed width layout for larger screens and a fluid width layout for smaller screens:

/* fixed width 960px and centered website */
body { text-align: center; }
#frame { width: 960px; margin: 0 auto; text-align: left; }

/* make it fluid on smaller screens */
@media screen and (max-width: 960px) {
  #frame { width: auto; margin: 0; }
}

There are a lot of layout tweaks you can do for smaller screens. Unfloat images where it makes sense. Wrap long lines in code blocks to prevent horizontal scroll bars. Superfluous elements can disappear.

@media screen and (max-width: 320px) {
  img.previously-floated-image { float: none; }
  pre.long-code { white-space: pre-wrap; }
  .superfluous-element { display: none; }
}

Flexible Fonts

I like to use larger fonts on smaller screens. Instead of overriding each individual element in a media query, it's easier to use the elastic method.

For the elastic method, the body's font size is set using px. All other elements whose font size differs should use em:

body { font-size: 14px; }
h1 { font-size: 2em; }  /* 2 x 14px = 28px */
h2 { font-size: 1.5em; } /* 1.5 x 14px = 21px */

Now the media query can simply change a single element's font size instead of dozens of font sizes:

@media screen and (max-width: 320px) {
  body { font-size: 18px; }
  /* other elements using em are now based off of 18px */
}

Some Considerations

Consider using larger target areas on smaller screens. Desktops and laptops have the luxury of precise cursors. Mobile phones and tablets viewers use their less precise fingers.

Along with losing the mouse cursor, all hover interactions are loss. Does your site use a lot of tooltips? You'll have to figure out a way to teach users without using tooltips.

Earlier, I made the assumption that a smaller width meant low bandwidth. There are a lot of assumptions based on viewport width we can make, but it's best to back up these assumptions with web analytics.

Is it a good business decision to make a mobile friendly version? Before you start, make sure a significant portion of your viewers are visiting your site with a small screen.

Further Reading

Hands down, my favorite book on this subject is Responsive Web Design by Ethan Marcotte. It's the perfect balance of information and brevity.

Jarrod covers a lot in 155 pages:

• layout
• visual hierarchy
• proximity/space
• typography
• color
• design process
• stealing
• miscellaneous tips
• evaluating your own design

Some Tips

The book is full of useful tips, but here were some of my favorites.

Stick to conventions — a ton of sites already use the standard 3-section layout with a header, main area, and sidebar. Visitors are already used to it, can you use it too?

Align everything — whether elements are consecutive or have hundreds of items between them, they still need to be aligned.

Either contrast A LOT or don't contrast at all — design gets awkward when there are small breaks from repetition of sizes/colors/fonts/layout. Only break repetition if it's your intention for an element to stand out.

Proximity affects pacing — break apart elements for some breathing room. Use adequate line heights for readability.

Try sticking to two fonts — one serif and one sans-serif for contrast, otherwise it's awkward when two different fonts are somewhat similar. Use one for headlines and the other for long texts.

Further Reading

It's ideal for anyone who wants to roll their own design, whether that's for a software UI or a sales website. You can get the book at Bootstrapping Design.

Another classic book on the same subject is The Non-Designer's Design Book. It includes more theory and foundation, but is still pragmatic for developers who want to learn design for making stuff.

Product People

Want to launch a product? Learn from product authors who have done it before. Hosted by Justin Jackson and Kyle Fox, Product People interviews people who make their living building beautiful products.

Each interview is split into two digestible episodes. The first is a life story and the second has actionable tips.

I cannot recommend this podcast enough. Their show consistently features prominent product bootstrappers with great advice:

• Patrick McKenzie (Part 1, Part 2)
• Sacha Greif (Part 1, Part 2)
• Rob Walling (Part 1, Part 2)
• Brennan Dunn (Part 1, Part 2)
• Jason Fried (Play)
• Nathan Barry (Part 1, Part 2)

Kalzumeus Podcast

Quality over quantity. That's what comes to mind when I think of Patrick McKenzie and Keith Perhac's Kalzumeus Podcast.

If you're on Hacker News, you probably know Patrick McKenzie by his handle — patio11. Actually, he probably replied to one of your comments on HN.

Topics include pricing, business, marketing, products, consulting, and more. Here were my favorite episodes — practically all of them:

• Amy Hoy: Pricing, Product, And Passion
• Brennan Dunn: Growing Consulting Practices
• Ramit Sethi: Getting Your First Consulting Client
• Ramit Sethi: Why Your Customers Would Be Happier If You Charged More

Startups for the Rest of Us

Rob Walling and Mike Taber have over one hundred episodes worth of tips for launching software products over at Startups for the Rest of Us.

They're both expert micropreneurs — each has their own personal conglomerate of products ranging from auditing software to a wedding website builder.

Both hosts also built their personal conglomerates via bootstrapping. They started out doing consulting work and slowly transitioned into launching products. Listen to their stories:

• How Mike Taber Left His Job
• How Rob Walling Left His Job

Start Small, Stay Small

Start Small, Stay Small isn't a podcast. It's an ebook/audiobook for developers who want to launch profitable software businesses.

Written and narrated by Rob Walling, this audiobook covers:

1. What's a micropreneur and what's bootstrapping?
2. How to effectively use niches to your advantage.
3. How to make a sales website.
4. How to market a niche product.
5. How to outsource to give yourself more time.

TechZing Podcast

TechZing is an informal chat show for hackers — with hosts Justin Vincent and Jason Roberts.

This show isn't specific to bootstrappers, but they have several interesting episodes:

• Patrick McKenzie: The Long Tail of Optimization
• Amy Hoy: How to Build a Product Empire
• Amy Hoy and Patrick McKenzie: Audiences, SEO, and Design
• Rob Walling: How to Dramatically Increase Your Odds
• Rob Walling: Success with HitTail
• Ruben Gamez: Lessons Learned Building Bidsketch
• Peldi Guilizzoni: Balsamiq
• Ted Pitts and Harry Hollander: Bootstrapping Moraware
• Corey Maass: Bootstrapping The Birdy
• Pete Michaud: Retired at 25

The Business of Freelancing Podcast

What does freelancing have to do with bootstrapping? Freelancing/consulting is a common strategy used for income while bootstrapping a product.

The Business of Freelancing Podcast by Brennan Dunn (and up until recently Eric Davis) is packed with business techniques and tips. Both hosts have used freelancing/consulting as their main source of income while they launched ebooks and a SaaS product.

Be sure to check out:

• Episode 3: Pricing Methods
• Episode 4: Nathan Barry
• Episode 5: Content Marketing
• Episode 7: Obie Fernandez

At the end of the day, your product launch won't happen by listening to podcasts. These podcast hosts and interviewees give terrific and actionable advise. It's your job to execute. Good luck!

Keywords in Titles, Headers, and URL Paths

Perhaps the most important on page factor is the text between your <title> and <h1> tags. Make sure your target keywords are part of the page title and headers. Also make sure the title/headers aren't overloaded with too many keywords.

The URL path should include targeted keywords. It's better to use a flat hierarchy instead of a nested one.

http://example.com/kitchen-knives/

is better than:

http://example.com/blog/2013/5/kitchen-knives/

Trailing Slash Consistency

According to search engines, these two URLs are considered two separate resources:

http://example.com/kitchen-knives
http://example.com/kitchen-knives/

The only difference being the trailing slash. If backlinks are split between both URLs, it's essentially splitting the ranking in half. Choose one URL structure and stick with it.

Use a 301 permanent redirect in case someone links to the wrong page. A 301 permanent redirect also tells search engines that the URLs point to the same resource and should be ranked as such.

Crawler Hints

Use microformats — they're useful to get relevant information onto search engine result pages. If your site includes rich snippets for reviews, Google will show stars in their search results. Learn more about rich snippets.

Use meta description — although meta tags don't effect rankings, meta descriptions are sometimes used in search result descriptions. Google doesn't always use the <meta name="description"> text, it's only used when the text is deemed relevant to the search phrase.

Use sitemaps — see the Sitemap Specification for details. Many blog engines have plugins to automatically generate sitemaps for you.

Put Something Up as Early as Possible

Before your website is finished, buy the domain and put up a landing page immediately because website age matters in rankings. In some industries, the Google Sandbox Effect can really hurt. It's best to let your site brew.

Get Backlinks from Relevant Sites

Find relevant websites and ask them to talk about your product. This works best if you have something to offer to their audience, like a coupon code or a free giveaway.

Some blogs may accept guest posts. At the beginning or end of a guest post, you'll be given some "about the author" space. Here's where you can get a backlink to your website. Make sure the anchor text includes the targeted keywords.

Directories like EzineArticles accepts articles about almost anything. In return for writing an article, they give you a resource box where you can link back to your website.

Site Directories

Site directories were used before search engines became the popular way to find content. Websites listed in site directories get a large boost in rankings. Dmoz is a popular directory. The Yahoo Directory is another one, but has a fee.

Content Marketing

Start a blog and write useful content. With good content, your audience will naturally link to you. This is the best thing you can do to acquire backlinks.

Content marketing requires an initial spark of backlinks before it can grow, so it's a good idea to use some of the above tips first.

Before you write any content, use Google's Keyword Tool to make sure people are actually searching for your targeted keywords. Check the [Exact] match type option in the left column.

Check out the competition for your target keywords. For example, search for:

allintitle: "kitchen knives"

to see how many websites are currently targeting the same keywords.

Target the Long Tail

Pick long-tail keyword phrases which contain more words, have a smaller number of monthly searches, but also have less competition.

The phrase "best kitchen knives" has less monthly searches than "kitchen knives", but it'd be easier to rank for it. Use a long tail keyword tool like HitTail, which automatically tells you what to write about to acquire traffic.

Content Tips

Write evergreen content. Evergreen content means content that ages well. It's content that will be relevant years later.

Publish everywhere! If you have the time and resources, consider releasing content on: YouTube, podcasts, app stores, Amazon marketplace, and more. People are searching for content everywhere.

As a bonus, content hosted on youtube.com or amazon.com will rank better on Google compared to your own domain name. This is because YouTube and Amazon have more authority than your site.

Good Luck!

Remember that SEO is a game of momentum. Getting started is daunting, but each tweak will improve your rankings a bit. With each small improvement, your momentum builds and ranking becomes easier.

For fun, I also ended up making a console Pomodoro Timer called Thyme. There's tmux integration baked right in. You can also extend it with Ruby.

Get it with:

$ gem install thyme

Watch a timer in your tmux status bar:

# vim ~/.thymerc
set :tmux, true

# vim ~/.tmux.conf
set-option -g status-right '#(cat ~/.thyme-tmux)'
set-option -g status-interval 1

The ~/.thymerc file actually runs any Ruby source code. Thyme has pre/post hooks, so you can run arbitrary code:

before do
  `mplayer ~/flight-of-the-bumble-bee.mp3 &`
end

after do |seconds_left|
  `notify-send -u critical "Thyme's up!"`
end

There's also an option method, in case you wanted to add new options to the thyme binary:

option :t, :today, 'open today sheet' do
  `vim ~/.thyme_today.md < \`tty\` > \`tty\``
end

The source code is available via GitHub. Hope you enjoy it!

Here's a brief history of computing.

Charles Babbage's Analytical Engine

1822 — Charles Babbage proposed an idea to the Royal Astronomical Society of London, what if he could automate a computer's job?

During this time, a "computer" was a person who computed mathematical calculations. Teams were assembled for tedious work. The results were placed into a huge data table, for later usage. The earliest known computers calculated data for dealing with celestial objects — e.g. timing Halley's Comet. But it wasn't a prestigious job. It was the opposite.

The human computer is supposed to be following fixed rules; he has no authority to deviate from them in any detail. — Alan Turing

Babbage's idea intrigued the British government, who also employed human computers. Labor was expensive and error prone. An automated device would solve both problems. The government funded Babbage's idea and he began work immediately on the Difference Engine.

Babbage designed the Difference Engine to be a mechanical device that tabulated data for polynomial functions, e.g. y = x² + 4x + 2. Mechanical columns would be used as input, which you could rotate to be any decimal number. A hand crank would spin the gears to produce an output.

While designing his Difference Engine, he realized that a more general purpose machine could be made. Instead of inputting only numbers as data, he could input both instructions and data. The instructions could be delivered via punch cards — a technique taken from mechanical looms of the time. He called this second machine the Analytical Engine, which is widely regarded as the beginning of computers as we see them now.

Although designed, Babbage was never able to complete construction of his two engines. The machinery was too complicated for its time and funding was eventually withdrawn.

Ada Lovelace's Algorithm

1833 — Ada Lovelace is introduced to Charles Babbage through a mutual friend. He shows his work and they quickly become friends.

Lovelace was a mathematician and logician. In 1842, Lovelace was hired to translate a French paper, a transcript of a seminar given by Babbage, to English. She included her own notes with the translation.

The Analytical Engine might act upon other things besides number, were objects found whose mutual fundamental relations could be expressed by those of the abstract science of operations... — Ada Lovelace

Included in her notes were instructions for the Analytical Engine. It was an algorithm for computing the Bernoulli numbers — the first algorithm specifically made for a computer, or the first computer program.

Through her work as a mathematician, Ada Lovelace becomes the world's first computer programmer.

Claude Shannon's Digital Circuits

1937 — Claude Shannon finishes his master's thesis at MIT. His paper, A Symbolic Analysis of Relay and Switching Circuits, introduced the world to digital circuits.

As an undergraduate, Shannon took a course on boolean algebra — a branch of logic that dealt with the values true/false and operations on those values. If you're a software programmer, you're all too familiar with boolean logic. We use it everyday. If you're not a software programmer, you've probably heard about how computers work with binary — ones and zeros. Those ones/zeros can also represent true/false.

Shannon showed how you could arrange electrical switches to perform boolean algebra, the underlaying concept of digital circuits. It later turned out that using digital circuits to perform math was much more reliable than the mechanical/analog approach.

Konrad Zuse's Z3

1938 — Konrad Zuse had been designing and building his Z1 machine for the past 3 years in Berlin. Like Babbage's engines, input and output were specified using decimal numbers. Unlike Babbage's design, the input was translated to binary before calculations were performed.

Unfortunately, the Z1 was unreliable when used. Its mechanical parts required precise synchronization, which turned out to be unpredictable. Zuse uses his newly found knowledge to create successors to his machine.

In 1941, Zuse finishes construction of the Z3. Whereas the Analytical Engine was never completed, the Z3 was the world's first working programmable binary computer.

In 1943, Zuse's machines would be destroyed during the Allied air raids.

Alan Turing's Turing Machine

1939 — exactly one day after the United Kingdom entered World War II, Alan Turing steps foot onto Bletchley Park. He begins his cryptography work to decode Germany's encrypted messages.

After World War I, Germany began encoding secret messages using a mechanical device called the Enigma machine. It was a electro-mechanical device with a keyboard for input. The Enigma's appearance resembled a typewriter in a briefcase.

Turing and his team quickly developed a machine to decrypt German messages, which they called the Bombe. By the end of World War II, over 200 Bombes were constructed. Winston Churchill credited Turing as the single largest contributor to the Allies' victory. But his work during the war wasn't his only contribution. Perhaps even a larger contribution was the Turing Machine.

Let's rewind a few years to 1936. Turing publishes his paper, On Computable Numbers, with an Application to the Entscheidungsproblem, that introduces the world to an "a-machine" (it wasn't renamed to Turing machine until years later).

The Turing machine is a concept, not a physical reality. It consists of:

• tape, which the machine operates on by reading/writing symbols onto it
• state register, stores the current state of the machine
• table, instructions for the machine to execute at any given state

What Turing describes isn't actually a computer but the act of computation itself. The concept is so important in computer science that the term "Turing complete" was created. Any system is Turing complete if it can simulate a Turing machine. For example, a programming language is considered complete if it can manipulate memory and has conditional logic.

Before the World War II, computers were constructed for a single purpose. But after the war, efforts switched to building a Turing complete, general purpose computer. Turing himself attempted to build one in 1945, but it was never finished.

The United States Army's ENIAC

1947 — the ENIAC was switched on for the first time. It was the first electronic, Turing complete computer. It took 3 years and $500,000+ to construct.

The ENIAC, or Electronic Numerical Integrator And Computer, was primarily designed to calculate mathematical tables used in military artillery. It was built using thousands of vacuum tubes and crystal diodes. Punch cards were used for input and output.

Programming the ENIAC was incredibly complex compared to today's standards. After creating an algorithm, a team of engineers would have to translate the instructions by flipping switches and re-routing cables on the machine. The process usually took days.

The ENIAC operated for 8 years until October 2, 1955.

So... Which Was the First Computer?

It depends on how you define a computer.

Charles Babbage early work on the Analytical Engine could be considered the first computer, except it was never completed. If you're ever in Mountain View, I highly recommend visiting the Computer History Museum where they finished construction of Babbage's Difference Engine.

Konrad Zuse's Z3 is often cited as the world's first computer. It was fully operational and programmable. Except it wasn't fully electronic and wasn't designed to be Turing complete. Later on, in 1998, it was proved to be Turing complete using a few hacks.

The ENIAC could also be considered the first computer. It was functional, electronic, and Turing complete. What more could you ask for?

But if anyone asks which was the first computer, just tell them it was the abacus.

def print_file(filename)
  if File.exist?(filename)
    if File.readable?(filename)
      File.open(filename) { |f| puts(f.read) }
    else
      puts "Can't read file: #{filename}"
    end
  else
    puts "File doesn't exist: #{filename}"
  end
end

The method's original intent is hidden! Let's extract the error handling:

def print_file(filename)
  File.open(filename) { |f| puts(f.read) }
rescue Errno::ENOENT
  puts "File doesn't exist: #{filename}"
rescue Errno::EACCES
  puts "Can't read file: #{filename}"
end

The special cases are moved to the bottom and intent becomes clear. We use the basics of exceptions every day. If we get to know the internals a bit, we might learn new tricks.

Let's deep dive into Ruby's exceptionally useful world of error handling.

How Does Raise Work?

raise is just a method on Kernel, which is a module that gets included by the base class Object. That's why you have access to it everywhere. Since it's just a method, you can override it. Let's look at the three ways to raise:

raise
raise(string)
raise(exception_class_or_obj, optional_message, optional_stack_trace)

Calling without any arguments will default to raising a RuntimeError. If you're in the context of another error it will re-raise:

begin
  method_that_raises(ArgumentError)
rescue ArgumentError => error
  logger.info("Error: #{error}")
  raise # re-raises the argument error
end

Calling with a string will instantiate a new RuntimeError and set the error message. It's useful for some quick debugging.

Raise is much more useful when you provide context, such as an exception class/object and message:

raise ArgumentError.new("must be positive integer but was provided: #{num}")
raise ArgumentError, "must be positive integer but was provided: #{num}"
raise ArgumentError, "must be positive integer but was provided: #{num}", caller(0)

The three lines above are identical. That last argument is a stack trace — Ruby uses an array of strings. caller(0) will provide the current stack trace.

Raise doesn't explicitly instantiate a new exception object. Instead, it calls #exception:

def raise(exception_class_or_obj, message, stack_trace)
  error = exception_class_or_obj.exception(message)
  # ...
end

After being raised, program execution is bubbled up to the matching rescue block.

How Does Rescue Work?

rescue attempts to match with a raised exception. Rescue blocks should be short. Its intent is to handle the exception and bring your code back to a good state. If that's not possible, fail with an explicit message.

Whereas raise defaults to RuntimeError, rescue defaults to StandardError. The two lines below are identical:

rescue
rescue StandardError

Explicitly passing an exception will handle that class and its children. RuntimeError is a child of StandardError, so the default rescue will handle it.

It's usually frowned upon to rescue Exception. Exception is the base class of all exceptions in Ruby, including system errors such as SignalException. Rescuing it means users won't be able to Ctrl-C out of your program.

Internally, Ruby uses the === class method to determine if an exception should be rescued or not. You can actually define your own handler:

module CustomExceptionHandler
  def self.===(exception)
    exception.message =~ /42/
  end
end

begin
  raise RuntimeError, "answer to the universe: 42"
rescue CustomExceptionHandler => error
  # handle error
end

Some Useful Patterns

Guard your method with raises near the top. This provides clear preconditions to callers:

def my_picky_method(left, right)
  raise ArgumentError("#{left} must be less than #{right}") if left >= right
  # ...
end

Keep error handling near the bottom. This lets your method's intent stay clear and prioritizes the normal flow of execution:

def my_clear_method(key)
  process_some_data(key)
rescue KeyError => error
  logger.info("Unexpected key: #{error.message}")
rescue TypeError => error
  logger.info("Unexpected type: #{error.message}")
end

Define your own exceptions. Think about creating a hierarchy of custom exceptions for your application. You'll allow more precision for exception handling and uncaught exceptions will have much better explanations. Also consider providing more context, such as a user id:

class AppBaseError < StandardError; end;
class APIError < AppBaseError; end;
class ClientError < AppBaseError; end;
class ServerError < AppBaseError; end;
class UserNotFoundError < AppBaseError
  attr_reader :user_id
  def initialize(message='User not found', user_id=nil)
    @user_id = user_id
    super(message)
  end
end

Implement #exception for some syntactic sugar. Remember that raise works with any object or class that defines the #exception method:

class APIRequest
  def exception(message)
    error = APIError.new(message)
    error.request = self
    error
  end
end

request = APIRequest.new
request.do_something()
raise request if request.retries > 10

Override raise. Raise is just a method which can be overridden like any other. Think about which contexts this might be useful in:

module RaiseLogger
  def raise(exception_class_or_obj=RuntimeError, message=nil, trace=nil)
    logger.info(exception_class_or_obj)
    super
  end
end

class UsersController
  include RaiseLogger
  # ...
end

Learning the internals of exception handling helps us create useful patterns. It's also fun! But at the end of the day, raise and rescue are just tools. We use them to write cleaner code.

So two years ago, I picked up Servers for Hackers which took a terrific bottom up approach on how to setup and run a server. I've been using it as a reference to setup servers for my side projects, I highly recommend it.

Here's what I used to get Nginx up and running, with SSL, for both static sites and applications needing a reverse proxy. I'm using Ubuntu 16 LTS.

Site Configuration

I keep these tasks under a webserver role.

For the site.yml file, I keep a list of sites for each host group under the sites and sites_nginx vars. The latter maps Nginx templates to their destination.

- hosts: example
  roles:
    - webserver
  vars:
    sites:
      - example.com
    sites_nginx:
      - { src: "nginx.conf", dest: "nginx.conf" }
      - { src: "nginx-example.conf", dest: "sites-available/example.com" }

Let's Encrypt SSL Tasks

Let's Encrypt is amazing! I can get a free SSL certificate, automate its installation, and even automate renewal.

In roles/webserver/tasks/ssl.yml:

- name: install apt-transport-https
  apt: pkg=apt-transport-https state=present update_cache=true

- name: generate dhparams file
  command: openssl dhparam -out /etc/ssl/certs/dhparam.pem 4096
  args:
    creates: /etc/ssl/certs/dhparam.pem

- name: install certbot
  apt: pkg=certbot state=present update_cache=true

- name: install python3-certbot-nginx
  apt: pkg=python3-certbot-nginx state=present update_cache=true

- name: check if certificate exists
  stat:
    path: /etc/letsencrypt/live//cert.pem
  register: letsencrypt_cert
  with_items: ""

- name: stop nginx for certbot
  service: name=nginx state=stopped
  with_items: ""
  when: item.stat.exists == False

- name: generate new certificate
  shell: "certbot certonly --standalone --noninteractive --agree-tos --rsa-key-size 4096 --email YOUR_EMAIL_ADDRESS@EXAMPLE.COM -d "
  with_items: ""
  when: item.stat.exists == False

- name: start nginx for certbot
  service: name=nginx state=started
  with_items: ""
  when: item.stat.exists == False

- name: add crontab to renew certificates
  cron: name="renew ssl" minute="30" hour="8" weekday="0" job="certbot renew --pre-hook \"service nginx stop\" --post-hook \"service nginx start\" >> /var/log/le-renew.log"

This installs certbot and its prerequisites, generates the private key and SSL cert, and adds a cronjob to renew the certificate. Thank you, Let's Encrypt!

Using a 4096 key size will take longer to generate, but is a good trade-off for security.

Nginx Handler and Tasks

Make sure Nginx is started with roles/webserver/handlers/nginx.yml:

- name: start nginx
  service: name=nginx state=started

Then for roles/webserver/tasks/nginx.yml:

- name: install nginx
  apt: pkg=nginx state=present update_cache=true
  notify:
    - start nginx

- name: remove default sites-available and sites-enabled
  file: path=/etc/nginx//default state=absent
  with_items:
    - { directory: 'sites-available' }
    - { directory: 'sites-enabled' }

- name: setup nginx configurations
  copy: src=../files/ dest=/etc/nginx/ owner=root group=root mode=644
  with_items: ""

- name: setup sites-enabled
  file: src=/etc/nginx/sites-available/
        dest=/etc/nginx/sites-enabled/
        state=link
        owner=root
        group=root
        force=yes
  with_items: ""

This will install Nginx and copy over the configuration file for each site. It follows the standard pattern of keeping configurations in sites-available directory and linking them from sites-enabled. I keep one main nginx.conf along with a different configuration for each site.

Nginx Conf

For the standard roles/webserver/files/nginx.conf:

user www-data;
worker_processes 1; # usually one per core
pid /run/nginx.pid;

events {
  worker_connections 1024;
}

http {
  # Defaults
  sendfile on;
  tcp_nopush on;
  tcp_nodelay on;
  client_body_timeout 12;
  client_header_timeout 12;
  keepalive_timeout 15;
  send_timeout 10;
  types_hash_max_size 2048;
  include /etc/nginx/mime.types;
  default_type application/octet-stream;

  # Logging
  access_log /var/log/nginx/access.log;
  error_log /var/log/nginx/error.log;

  # Compression
  gzip on;
  gzip_comp_level  2;
  gzip_min_length  1000;
  gzip_proxied     expired no-cache no-store private auth;
  gzip_types       text/plain application/x-javascript text/xml text/css application/xml;

  # Virtual Hosts
  include /etc/nginx/conf.d/*.conf;
  include /etc/nginx/sites-enabled/*;
}

For individual sites, the configuration should live at roles/webserver/files/nginx-example.conf. A server block should do a permanent 301 redirect to SSL (handling non-SSL connections):

server {
  listen 80 default_server;
  listen [::]:80 default_server;
  server_name example.com;

  root /usr/share/nginx/html;
  index index.html;

  location ~ /.well-known {
    allow all;
  }

  location / {
    return 301 https://$host$request_uri;
  }
}

The next server block should handle SSL connections. I've added some lines to handle trailing slashes, caching asset files (I usually fingerprint these), and handling 405/500 errors:

server {
  listen 443 ssl;
  listen [::]:443 ssl;
  server_name example.com;

  ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

  ssl_protocols TLSv1.2 TLSv1.3;
  ssl_prefer_server_ciphers on;
  ssl_dhparam /etc/ssl/certs/dhparam.pem;
  ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:CAMELLIA:DES-CBC3-SHA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA';
  ssl_session_timeout 1d;
  ssl_session_cache shared:SSL:50m;
  ssl_stapling on;
  ssl_stapling_verify on;

  # to remove trailing slash
  rewrite ^(/.*)\.html(\?.*)?$ $1$2 permanent;
  rewrite ^/([^.]*)/$ /$1 permanent;

  root /home/deploy/example;
  index index.html;

  location ~* \.(jpg|jpeg|png|gif|ico|css|js|eot|ttf|woff|woff2)$ {
    expires max;
    try_files $uri =404;
  }

  location ~ ^/([^.]*)/?$ {
    expires 1h;
    try_files $uri $uri.html $uri/index.html =404;
  }

  error_page 404 =404 /404;
  error_page 500 502 503 504 =500 /500;
}

The actual directory holding your HTML files and web assets is at /home/deploy/example here. Enabling these SSL Ciphers should get you 100% at SSL Labs.

For reverse proxies, use the proxy_pass directive. In the case below, I'm mapping routes that start with /api to port 8000:

location ~ ^/api/.*$ {
  proxy_pass http://localhost:8000;
}

Conclusion

I hope that's helpful! I keep a single repository with my deploy playbooks. When I need to add a new site, I simply add a new nginx-*.conf file and update the sites and sites_nginx vars.

After 7 miles and 4,800 feet in elevation gain, this was the most satisfying view of my life.

San Francisco → Yosemite

We left on Friday afternoon. Everyone had taken off early from work, so we could get an early night sleep at our cabin. Google Maps told us to expect a 3.5 hour drive. But after traffic, the short road trip ended up being close to 5 hours long.

On the way, we stopped by a grocery store to pick up dinner for the night. Plus snacks and meals for the hike. This was my first long hike, so I had a few questions for the experienced hikers. How much should we eat for dinner and breakfast? Carbs or fats? What's the restroom and toilet paper situation during the hike? Rocks were the answer for that last question. That had to be a joke.

At the cabin, we had dinner and slept early around 8pm. The alarm was set for 4am.

Half Dome

After parking the cars and walking away, we went back to make sure no snacks were left behind. Had to make sure bears weren't interested in our cars. I brought a headlamp, which was super useful since the sun wasn't up yet.

We took the Mist Trail going up. It passed Vernal and Nevada Falls, where most of the mist comes from. Honestly, even a short hike to these falls would have been enough for me. The waterfalls were beautiful. The trail included half a mile of huge granite steps, each step was maybe two feet tall. The steps were slippery from the mist.

After the falls, the hike felt drawn out at times. I zoned out. We took a few breaks to snack on our candy (gummies!) and nuts. I was already tired by the time we reached the cables.

At first glance, the Half Dome Cables were slightly frightening. It looked like a long line of ants, going up an almost vertical wall. It was a slog getting up. The hardest parts came from maneuvering around groups taking breaks. On the way up, everyone got plenty words of encouragement from the hikers heading down. A lot of "you're almost there"! We all brought heavy duty gloves, which helped with gripping the cables.

After 7 miles and 4,800 feet in elevation gain, we finally made it to the top! It was extremely windy. The view of the entire valley was amazing. We all took photos at the peak, everyone was being extra cautious — reminding everyone else to please not fall off. We also had our lunch here, some packed breakfast burritos.

On the way down, we took the John Muir Trail which was less steep and easier on our knees. The entire hike was about 14.5 miles round trip.

Camp 4 Bouldering

The next day, we went to Camp 4 for a quick bouldering session. I was extra excited to come here, especially after watching Valley Uprising. I got to see the famous Midnight Lightning problem!

I felt completely out of my league here. Outdoor bouldering was tough. What guidebooks called jugs here felt more like crimps. We nicknamed them the "Yosemite Jug". Can't wait to come back after a few more years of climbing though!

I've lived in the Bay Area my most of my life, minus 4 years in San Diego. But living in San Francisco has been the most memorable part.

The city is densely packed, only covering 7 by 7 miles of land. It's no secret that it's a tech hub — the majority of people I met were software engineers or worked at a tech company, just like me. San Francisco has so much to offer. I always felt like I didn't have enough time to adequately experience it. These were the spots I spent most of my time at.

Climbing

Dogpatch Boulders — my second home! Starting climbing was one of the best decisions of my life. It's addictive. After being sedentary for most of my twenties, it was something I needed. The gym gets crowded during the evenings after work, but it's also a fun social hobby to work on problems with other climbers. They also throw fun competitions like Battle of the Bay.

Mission Cliffs — membership at Dogpatch Boulders will let you come here too. Plenty of roped routes to choose from, but it gets crowded during evenings just like Dogpatch.

Planet Granite — plenty of roped routes and a larger bouldering section than Mission Cliffs. It's located in the corner of the city, at the Presidio. When you top out, you get a great view of the bay.

Lindy Hop

920 Special — the instructors here did an amazing job teaching Lindy Hop. Every Thursday evening, there are multiple classes for all skill levels, including complete beginners like me! After class is the social dance that runs from ~9:20pm to midnight.

Lindy in the Park — LitP has been running for over two decades! It runs every Sunday, 11am to 2pm, at Golden Gate Park. There's a short lesson at the beginning of each dance.

Bootleggers Ball — it's a once-a-month event in the Mission. Remember to dress classy! It's like you've gone back in time to the 1920's, dancing to live jazz.

Bars, Coffee Shops, and Bakeries

Southern Pacific Brewing Co — I'm not a big drinker, these days averaging about one drink every other month or so. But SoPac was my go-to spot while living in San Francisco. After every climbing session at Mission Cliffs, my buddy Kevin and I headed here for dinner. Try the glazed Brussels sprouts, they're delicious!

Cafe Murano — I have a weekly habit of working from coffee shops. Once a week, I'll work out of two or three cafes around the city. Cafe Murano was one of my favorite spots to work.

Atlas Cafe — before a climbing session at Mission Cliffs, this was a great place to pick up coffee. On Friday evenings, they have live jazz, so it was a good spot for dinner and music.

Blue Danube Coffee House — it's in the Inner Richmond neighborhood and is another great spot to work (or read). When the weather is sunny, they'll leave their front window open (it's a huge window) to get a breeze in.

B Patisserie — hands down, my favorite bakery in the entire world. There are so many delicious things here. I lived within walking distance and it was a struggle every day not buying their entire menu. Get there Kouign-Amann!

Ariscault — while B Patisserie was my favorite bakery, I thought Ariscault had the best croissants in San Francisco. I have no idea how they get it so flaky. I'd recommend every single croissant there.

I flew into San Francisco and went to my college friends' wedding. We started our road trip that same night. Seriously, we hopped into a car headed to Bishop in wedding attire. This was also the same night as the Game of Thrones series finale, so we watched that in the back seat.

Bishop

We got to Bishop around 3 or 4am. It was 30 degrees cold, we were tired, but we had to setup our tents still. It was tough to do in the dark, but after ~10 minutes or so the tents were up and I was off to sleep. Except it was incredibly windy the entire night, I thought there was a bear attacking the tent. Or my friends were messing with me by hitting the tent. Could have been either one.

Bishop had hundreds of boulders scattered across the desert. The granite rocks were rough on our fingers. Crimps felt like sharp glass edges. We mostly stayed around Happy Boulders and Birthday Boulders. It was tough but fun.

Zion

Leaving Bishop, it was a 7 hour drive to Springdale, Utah. We spent our first day just scouting the area, planning on how we would spend the next few days in Zion and the surrounding parks.

We ended up splitting our time in a few areas:

Angels Landing — the hike itself was only about 5 miles. There was a steep, scrambly area with chains that scared me a bit. There was a crowd of hikers, so it was tough sharing the same space near the top. A trail runner ran downhill, which amazed me. The view from the peak was amazing. The valley floor was covered with green vegetation.

Kanarra Creek — the Narrows were flooded, so we picked another slot canyon to hike. We did this one immediately after descending Angels Landing. It was 6 miles total, but felt more like twice the length! This was my first water hike and I never realized how much slower it takes hiking through a running river. At the end was a gorgeous waterfall running over an old ladder that we had to climb. I didn't expect it, but this was probably my favorite part of the trip. I'll need to look up more slot canyons to hike.

Moe's Valley — we came here twice. The first time was for night climbing, which was visually tough but the cold air felt relaxing. The sandstone felt so much smoother on our skin than Bishop's granite. The grading was nicer too, we could actually send problems here!

Bryce Canyon — a short drive away from Zion, we saw Thor's hammer here and the rest of the amphitheater. We came near sunset, so we could stargaze. Bryce Canyon is a certified international dark sky park.

Red Rocks

On our way back to San Francisco, we stopped by the Red Rocks in Las Vegas. These boulders were made of Aztec Sandstone and were also nice on our skin.

We mostly stuck around the Monkey Bar Boulder. I completely forgot this was where Plumber's Crack was, so we didn't check it out. But that's just a good excuse to come back!

From Red Rocks, we drove to San Luis Obispo where we camped out for the night before returning to San Francisco.

1. collecting input
2. performing work
3. delivering output
4. handling failures

Keeping these parts atomic makes the story strong, so I do my best to not unconsciously mix them up. Lately, I've been thinking about using adapters at the collecting input stage. This seems to make the work performance code more clear.

What's an Adapter?

The Adapater Design Pattern further separates interface from implementation, to the point where you can have a single interface for multiple implementations. Frameworks use adapters all the time. For example, ORMs like ActiveRecord. As the application developer, you'll use ActiveRecord's interface. But under the hoods, ActiveRecord uses the adapter pattern and can substitute in either Postgres, MySQL, or SQLite3 for the implementation.

While the pattern is useful for simplifying multiple implementations, it can be used to force a single interface too. For example, jQuery does a great job at this by always adapting matched elements to a collection. This happens regardless if you have zero, one, or multiple matched elements.

Here's what manipulating the DOM looks like in vanilla JavaScript:

// hiding one element
document.querySelector("#my-div").style.display = "none";

// hiding multiple elements
document.querySelectorAll(".my-div").forEach((div) => {
  div.style.display = "none";
});

// verifying element exists to avoid null pointer exceptions
let div = document.querySelector("#maybe-div");
if (div) {
  div.style.display = "none";
}

Here's what it looks like with jQuery:

// hiding one element
$("#my-div").hide();

// hiding multiple elements
$(".my-div").hide();

// no need to verify element exists, jQuery no-ops for no matched elements
$("#maybe-div").hide();

Of course there are drawbacks. Maybe we didn't want to silently fail for no matched elements. We also introduce extra complexity with the adapter implementation. You'll have to decide if the trade-off is worth it.

Examples for Method Parameters

On a smaller scale, we can use adapters for collecting input in our methods. This can open up our methods to a wide range of inputs, while keeping our implementation simple.

Consider this method, which allows for a single id or multiple ids as a parameter:

def perform_users(user_id_or_ids)
  if user_id_or_ids.is_a?(Enumerable)
    user_id_or_ids.each do |user_id|
      # implementation here
    end
  else
    user_id = user_id_or_ids
    # repeated implementation here on single user id
  end
end

Ruby has conversion functions, like Array(), that are part of its standard library. These are all idempotent. We'll use it to clean up the example above:

def perform_users(user_id_or_ids)
  Array(user_id_or_ids).each do |user_id|
    # implementation here
  end
end

Some conversion functions you can use include: Array(), Integer(), Float(), String(), URI().

In JavaScript, you can use constructors like Number() and String() to get the same effect. But be careful with Array():

function performUsers(userIdOrIds) {
  Array(userIdOrIds).forEach((userId) => {
    // implementation here
  });
}

performUsers("1"); // works as expected
performUsers(["1", "2"]); // wraps in a secondary array
performUsers(1); // does a no-op on an empty array

That's because the Array() constructor isn't idempotent (it will wrap an Array in new one). Also when called with a single integer argument, it will return an empty array using that argument as the array's length.

In languages that support dynamic dispatch, like Crystal, it may be more clear to extract input conversions to its own method:

def perform_users(user_id : Int32)
  perform_users([user_id])
end

def perform_users(user_ids : Array(Int32))
  user_ids.each do |user_id|
    # implementation here
  end
end

Chicago is beautiful. It was a shock moving here from California. My first winter here was the polar vortex. I did the boiling water challenge, throwing boiling water into the cold air to see it vaporize instantly. It really does feel like two different cities between winter and summer.

The city is huge! There's so much I haven't done yet. Most of the spots I go to are located somewhere next to a Blue Line station, since that's the line I live next to. I'm looking forward to exploring more of the city, but for now here are my favorite spots.

Climbing, BJJ, Muay Thai, and Lindy Hop

First Ascent — I'm a huge fan of bouldering and First Ascent is a great place to climb. There's four locations in Chicago: Humboldt Park, Block37, Uptown, and Avondale. Twice a year, there's bouldering league. It's a 6-8 week competition between teams. Teams need to come up with their own (punny) name, there are themed weeks with costumes, it's a blast.

Brooklyn Boulders — located in West Loop, Brooklyn Boulders has both roped routes and bouldering. The walls feel like glass though. I can't smear on them at all. I'm a huge fan of their aesthetics though!

Carlson Gracie HQ — the absolute best place to learn BJJ and Muay Thai in Chicago. They're large enough to have separate beginner and advanced classes, so you can get started with the fundamentals in beginner class. Muay Thai classes are right before BJJ, so you can stop in and do both in one evening.

Titan Gym — I took a few Muay Thai classes here too. It's a fun and friendly environment. The teachers are very welcoming. They offer a variety of classes, from Krav Maga to Kali.

Big City Swing — Lindy Hop classes for most weekdays. It's located in a small dance studio right next to the Western station. They have social dance nights once a month.

Coffee Shops, Shows, and Food

Sip of Hope — I've continued my habit of working from coffee shops at least once a week. Sip of Hope is my favorite place to work in Chicago. There's plenty of seating, the Chai Latte is delicious, and their profits go towards a good cause.

Cafe Mustache — half coffee shop, half bar, depending on what time you arrive. I'm a big fan of their breakfast bagel. I also like the old-school records vibe. Plus when you're done here, you can just head down Milwaukee Ave to the next coffee shop.

Colectivo Coffee — there are several locations, but the one I usually went to was right next to Cafe Mustache. I'm a big fan of their Matcha Latte. There's plenty of bar seating. It's right next to the California Blue Line station.

Wormhole Coffee — located in Wicker Park, walking into this coffee shop is like walking back in time. The room is filled with memorabilia from 80s and 90s pop culture.

Oromo Cafe — there are two locations, Bucktown and Lincoln Square. The Turkish pastries are delicious. They have a big selection of coffees and lattes, from Turkish coffee to a Horchata Latte.

Sawada Coffee — the absolute best place to get a Matcha Latte in Chicago. Also one of my favorite spots to work in. It shares a space with Green Street Meats, where you can have BBQ in a barn.

Cafe Integral — if I had a house with a study, Cafe Integral is what I'd want it to look like. In River North, this coffee shops is in a hotel. It's located right off of Michigan Ave.

Second City — I take all my friends visiting Chicago to the Second City. It's my favorite comedy club. They're famous for their improv and sketch comedy.

Green Mill — live jazz in Uptown, from big names to local bands. This was Al Capone's favorite lounge in Chicago. He had a booth reserved specifically for him. Also right next to First Ascent Uptown.

Small Cheval — both Small Cheval and Au Cheval have my favorite burgers (of all time). Au Cheval in West Loop has a fine dining experience and usually comes with a long line. Small Cheval has a more casual experience, but the burger is just as delicious.

Outdoors

Lakefront Trail — the most scenic trail I've ever been on. Biking the Lakefront Trail is my favorite summer activity. You can rent bikes on the trail, or rent it from a nearby Divvy station. Just a warning, those Divvy bikes are a little bit heavier (they're designed to survive Chicago winters). There are dozens of stops along the trail, where you can enjoy lunch and enjoy the view.

Riverwalk — downtown Chicago is gorgeous. A huge part of that is the Chicago River. When it's not winter, walking along the river is a relaxing experience. There's also Art on the Mart during summer nights. During summers, be sure to try the kayaking.

Millennium Park — Chicago really likes its outdoor festivals and most of them are at Millennium Park. Even if there's not a festival, it's fun to just grab a coffee and walk around the downtown park.

Lincoln Park — it's a huge park next to the Lake, with a great view of the skyline. It's also where the free Lincoln Park Zoo is.

South Lagoon — I went stand-up paddle boarding here twice. When I first arrived, I didn't think much of it. We launched off from an area filled with boats. But after paddling under a bridge, going further down the lagoon, you'll get one of the best views of the Chicago skyline in the entire city.

What's FIRE?

FIRE is an acronym for Financial Independence, Retire Early. It's important to separate the two. Reaching financial independence gives you the freedom to: start a business, work part-time, pursue hobbies full-time, focus on a charity, spend time with family, travel, or retire early. All without worrying about your finances.

The 4% rule is a general rule that many FIRE seekers use to determine how much they need to save up. It comes from the safe withdrawal rate, which says you can annually withdraw 4% of your saved portfolio without running out. This means you need to save up 25x times our annual spending. For example, if you spend $40k a year, you'll need to save up $1M.

LeanFI, FatFI, CoastFI, BaristaFI

A few sub-communities popped out of the main FIRE group. They each have their own strategy, depending on their lifestyle, earning opportunities, and values.

LeanFI — takes a leaner approach, accelerating your time to financial independence by reducing how much you spend. Pursuers tend to spend below $40k/year and target $1M saved for their FI number.

FatFI — takes the opposite approach to LeanFI, wanting to make no sacrifices in their lifestyles during retirement. There's no set amount, but pursuers tend to spend above $200k/year and target above $5M saved. This might mean staying employed longer to take advantage of your high income years as a senior individual contributor or manager.

CoastFI — this strategy involves saving enough money where investment returns should be enough by the time you hit your retirement age. For example, saving $250k by the time you're 30 years old. According to the Rule of 72, your portfolio should double about every 10 years. So it should be $1M by the time you're 50 years old. CoastFI means saving that initial $250k by the time you're 30, then "coasting" at an easier job that might pay less. As long as you don't spend your savings, you should be set for retirement.

BaristaFI — similar to CoastFI, someone who reaches BaristaFI isn't ready to retire yet. This strategy involves saving money in a high income (but perhaps also high stress) job before switching to a lower income (but also lower stress) job. Pursuers of BaristaFI will use their income to supplement the income they make from their investment portfolio.

Check out DeveloperFI!

If any of this sounds interesting, take a look at DeveloperFI! Right now, it's a collection of tips about: using tax advantaged accounts (401k/HSA/IRA), participating in ESPP, investing in index funds, diversifying with lazy portfolios, and more. I'm hoping to add more calculator tools (or even a command-line tool) later on.

I've recently had to setup DKIM/SPF for Boutique. The application uses Amazon SES, which has pretty straightforward steps. I'll be using Amazon SES as the email service provider in this article.

What are DKIM and SPF?

DKIM (DomainKeys Identified Mail) and SPF (Sender Policy Framework) are both email authentication methods. They let email receivers know that an incoming email from that domain has been authorized by the domain owners.

DKIM uses asymmetric cryptography to sign the email before it's sent out. The public key is listed on the domain's DNS records, where email clients can find it to verify any emails.

SPF adds a list of authorized IP addresses to a domain's DNS records. When an email client receives an email, it can check the domain's DNS to verify the sender's IP address is on that list.

What domains should I send email from?

The best practice is to send your transactional emails from a different subdomain than your marketing emails. For example: @transactions.example.com for transactional emails and @marketing.example.com for marketing emails.

Transactional emails are sent after a user action. They're expected and tend to have a much better reputation than marketing emails. Splitting the two keeps their reputation scores separate. You don't want your "confirm account" or "reset password" emails ending up in customers' spam folder.

Setting up DKIM

From your AWS console:

1. go to the SES management console
2. in the sidebar, under "Identity Management", go to "Email Addresses"
3. click on the email address you want to verify
4. click DKIM and click "Generate DKIM Settings"

This will generate a table of DKIM CNAME records. You'll need to log into your domain registrar and add these three CNAME records. An example row for the marketing.example.com subdomain will look like:

• Type: CNAME
• Hostname: abcdefghijklmnopqrstuvwxyz123456._domainkey.marketing.example.com
• Value: abcdefghijklmnopqrstuvwxyz123456._domainkey.marketing.example.com

Please note, that some registrars automatically append the apex domain name to the hostname portion of the CNAME record. So the actual value you should paste in would be:

abcdefghijklmnopqrstuvwxyz123456._domainkey.marketing

Since your registrar will automatically append .example.com to it.

Setting up SPF

All domains require the same TXT record to use Amazon SES as an email service provider. See Authenticating Email with SPF in Amazon SES for a full guide. Here's the TLDR:

1. go to your domain registrar
2. add a TXT record with @ as the hostname
3. use v=spf1 include:amazonses.com ~all for the value

You need to have a TXT record for each subdomain. So @ can be used if you're sending from the apex (eg example.com), but if you're sending from marketing.example.com you'll need to add another TXT record with marketing as the hostname.

Also if you already have an SPF record, you can add additional domains to it with the include: directive. The format below adds two email service providers:

v=spf1 include:example.com include:amazonses.com ~all

In sports like climbing, BJJ, or weightlifting there's quite a few structured training programs to choose from. Climbers have hangboarding and 4x4s. BJJ students have a common class format: warm ups, techniques/drilling, and rolling. Lifters can choose a program like Starting Strength, which dictates which exercises to perform at how many sets/reps and what weight to use.

As a software engineer, I have no idea how to practice to get better. Could we create a similar structured system? In this article, I'm mostly thinking out loud about how to become a better software engineer.

Naive Practice

When you first start a new sport, game, or skill, you can get better just by participating. If you're completely new to chess, you'll improve just by playing more chess games.

Ericsson calls this naive practice. It's just blindly repeating the same tasks over and over again, without much strategic thought. There's no focus on specific skills you need to improve, no goal setting, and no overall planning. Naive practice will get a person to reach an acceptable level of performance — but additional years won't lead to improvement.

Naive practice is perfectly fine and sometimes even recommended! When we first start programming, simply picking up a tutorial and writing programs is enough to improve.

Purposeful Practice

When you reach a plateau with naive practice, you'll want to start purposeful practice. This involves:

• breaking down the skill into chunks
• working on specific goals, especially to fix your weaknesses
• focusing intensely on improving a single chunk via practice (with full conscious attention)
• using an immediate/specific feedback system (ideally with quantitative measurements)
• continually push yourself to more challenging levels, outside your comfort zone

A baseball player's naive practice would be simply playing baseball games everyday. For Purposeful Practice, the player can pick a specific skill to improve — let's say batting. She can use an automated batting cage, record her swings on video for later feedback, keep statistics on her hits/misses, and keep a qualitative journal after each session. She can continually push herself by slowly increasing the speed of the pitch.

How can this be applied to software engineering and programming?

Breaking it down into specific chunks — languages (Ruby, Crystal, Swift, JavaScript, TypeScript, Go, Rust), topics (algorithms, data structures, web development, sysadmin, system design, architecture, AI/ML, compilers, types, functional programming), technologies (iOS/Mac, unix/shell, Ansible, React). Make a list of what you want to learn. Pick a specific item that you want to get focus on.

Focused practice — pick projects that will force you to develop your selected chunk. Since this is practice, your projects don't have to be used in production either. Commit to 100 Days of Code focused on your chunk. Use resources like books/screencasts to learn. Use resources like Execute Program, LeetCode, A Cloud Guru, Vim.so to practice.

Feedback system — I've found these systems apply to most programming skills: code reviews, pair programming, mentorship, and journaling. Code reviews from your teammates are a great way to gain valuable insight, just leave a short comment on your pull request asking for specific feedback. This works with pair programming sessions too. You can always ask your manager about how you can improve during your 1-on-1's. Keep a journal. Ask yourself what went well, what could have been done better, and record what you've learned.

Continually push yourself — pick projects that are more challenging than your previous. Look for projects that let you dip your toes into something you've never done before. Look for projects that will require learning from a book/screencast or some guidance from a teammate.

Deliberate Practice

Deliberate practice is purposeful and also includes:

• an well defined field where the regimen for improving is known
• an expert coach mentoring on how to improve by giving you a plan and providing feedback

“Deliberate practice is purposeful practice that knows where it is going and how to get there.”

You can get far with purposeful practice. You can get further with deliberate practice. The world of sports is full of coaches and trainers, making it easier to achieve deliberate practice.

I'm not sure how to mimic this in the world of software engineering. Perhaps finding mentors at your company (including your manager), and asking for their advice/feedback. Be genuine about what skills you want to work on. Or you can use a service like Coding Coach.

On the career side, you should absolutely speak to your manager about what's expected of you and how you can deliver more. Also check out services like Pathrise or Exponent, which helps with interviewing and career advice.

The Hero's Journey

Several years ago at an internal developer conference, Derek DeVries gave a talk about the Hero's Journey and how it applied to developers. He's a very smart engineer, you can follow him @devrieda. I'll try my best not to butcher the talk here.

The Hero's Journey is a commonly used story template. It's usually broken into three acts. The departure, when the hero is called to adventure and leaves his familiar settings. The initiation, when the hero faces a series of challenging tasks until he defeats the enemy. Each obstacle is slightly out of his comfort zone, he must learn and grow to overcome them — with the help of his mentor. The return, when the hero returns to his familiar settings. He has achieved a new level of wisdom, gained from his experiences.

This same template can be applied to your tasks, projects, and career.

At the beginning of every sprint, I'd have a large column of stories to choose from. It's tempting to assign myself the easiest tasks — the ones I'm most familiar with and have done before. But doing so means I'll be refusing the call to adventure. I need to, occasionally, pick stories that are outside my skill set. With resources like books, Stack Overflow, documentation, or existing commits, I should be able to learn enough to complete these tasks.

The same applies to project selection, especially if you're leading the project. Pick projects that fall slightly out of your abilities. Work with your teammates, team lead, and mentors to overcome your knowledge gaps.

At a high level, this also applies to job selection. If you're looking to grow in your career, pick jobs with two qualities: it's slightly out of your comfort zone and work with teammates/mentors who can help guide you.

Further Reading

Thanks for reading this post! I'm a huge fan of learning how to learn. If you're interested too, check out these resources:

• Peak — a tactical view on how to practice skills
• Mastery — a more strategic view on how to master crafts
• A Mind for Numbers — learning strategies for subjects that don't come naturally to us
• Effective Engineer — how to make meaningful impact as a software engineer
• Pragmatic Thinking and Learning — the Dreyfus Model of Skill Acquisition and how to deliberately learn