Devlog for day 14 of my #100DaysOfCode coding challenge.

tl;dr: My resume in HTML + WYSIWYP (what you see is what you print).

Checklist

Daily Requirements

• 1+ hour of coding #100DaysOfCode
• Devlog

Extra Tasks

• self study following my own syllabus
• startup or personal project work
• job related tasks
• get involved with Open Source

Progress Report

Two days of work, just one devlog.

You may have noticed a new link in the navigation menu for Resume and that it what I’ve been working on. I converted my resume into HTML with a printable version that looks exactly like what is on each page of the resume you see at that URL (currently only one, but it works for multiple pages). It took a lot of work and I learned quite a bit about CSS which is what I’ll be writing about today.

Why HTML?

The goal of converting my resume to HTML was to leverage:

• the powerful layout engine of CSS
• the many styling options of CSS
• Chrome’s Dev Tools to help align things perfectly (fonts can be particularly troublesome)
• font icons
• D3 charts (if I ever decide to add them to my resume)

WYSIWYP (what you see is what you print)

With that said, it wasn’t easy. The first order of business was to get the resume to display just like it would appear if you printed it. I also wanted to separate the pages in case I had a multi-page resume. The key links that helped me figure out how to do this were:

• StackOverflow: CSS to set A4 paper size
• jsfiddle from the above answer
• MDN web docs: Using the size syntax in CSS
• Wikipedia: Letter (paper size) - tl;dr: US Letter is 215.9mm x 279.4mm
• StackOverflow: How to print scrollable DIV content - Needed in my case as I was integrating this into my current website layout with a sidebar. It was not fun to figure out the media queries and styles I needed to reset to get printing to work correctly.
• Various attempts at controlling browser printing setting behavior. None really work if the user changes it themselves, but these are all quite educational reads:
  • StackOverflow: Margin while printing html page
  • StackOverflow: Disabling browser print options (headers, footers, margins) from page?
  • SuperUser: “Print” webpage to pdf with working hyperlinks

Key excerpt from StackOverflow answer:

 1 2 3 4 5 6 7 8 9101112

@page {
  size: A4;
  margin: 0;
}
@media print {
  html,
  body {
    width: 210mm;
    height: 297mm;
  }
  /* ... the rest of the rules ... */
}

Setting a Base

With that figured out, I wanted to streamline my ability to style and design the resume itself. I decided that I wanted to completely reset and remove all styles for all elements. That way, I’d have full control over how things looked and could ignore browser quirks. I did this by utilizing:

• Eric Meyer’s CSS Reset v2.0
  • I experimented with using a contextual reset based on the YUI library, but it didn’t work.
• border-box box-sizing applied to all elements from the start as a way to deal with alignment in a uniform manner.
• Strict adherence to some CSS Unit Best Practices. Also read:
  • CSS-Tricks: px – em – % – pt – keyword
  • StackExchange Graphic Design: What does the size of the font translate to exactly?
• Chrome’s Dev Tools to quickly toggle rendering mode to print
• Finally, using a separate stylesheet with background-color, outline, and border to help properly space and align elements with each other.

Finding Inspiration

The initial setup to get a clean working environment running smoothly took a long time, but it was well worth it as I could iterate quickly now. This led me to a roadblock. What should my resume even look like? All the tools in the world weren’t going to help me design anything, so I did what anyone would do and set out to find inspiration.

There are two broad styles of resume layouts that I felt were most attractive:

• Header Block Style
  • Examples: [1] [2] [3] [4] [5] [6] [7] [8]
• Side Column Style
  • Examples: [1] [2] [3]

There are others [1], but I didn’t feel like they were good layouts. I also sent a revised version of my old resume (written using LibreOffice Writer), for feedback and design advice. After some sketching and mulling about, I decided that the Header Block Style would work best.

I then did a bit more research on guidelines for resumes and these links proved to be the most useful:

• Resume Aesthetics: Fonts, Margins, and Paper Selection Guidelines
• reddit: IamA professional resume writer, owner of Unfold Careers, and I’d love to critique your resumes and answer your career questions! AMA!

And lastly, I picked some fonts I liked and font icons. These were my tools of choice:

• Font Awesome: The cheatsheet helps a lot.
• Source Sans Pro
  • Note: If it’s not working for italics or bolding, it could be because you need to include those weights/styles under Customize on the Google Web Fonts page.
• Montserrat

Turning Inspiration into Reality

HTML + CSS is powerful and great for creating documents, but man are there quirks. As someone who does not regularly write CSS, it was already difficult enough for me to structure my CSS correctly and use CSS selectors in a sane manner. To handle some non-intuitive parts of CSS on top of that? That was a real drag. I was able to get everything done though and these are a collection of random links that ended up helping me get unstuck:

• CSS-Tricks: line-height
• CSS-Tricks: list-style
• CSS-Tricks: vertical-align
• CSS-Tricks: A Complete Guide to Flexbox
• CSS-Tricks: flex-grow is weird. Or is it?
• StackOverflow: Flexbox - two fixed width columns, one flexible
• StackOverflow: Align an element to bottom with flexbox
• StackOverflow: How to align center the text in html table row?
• StackOverflow: CSS: how do I create a gap between rows in a table?
• StackOverflow: Space between two rows in a table?
• StackOverflow: How can I force all rows in a table to have the same height
• StackOverflow: Are custom elements valid HTML5?
• StackOverflow: What is the difference between <section> and <div>?
• StackOverflow: How to create hyperlink to call phone number on mobile devices?
• codepen: 18 Simple Styles for Horizontal Rules (hr CSS Design)
• Style the HTML hr tag with CSS

Conclusion

All of that over two full days of sitting in front on my computer == finished!

Now for the truly hard part. Finding a job.

Copyright © 2011-2020 Ho Yin Cheng