A more flexible header pattern

For accessibility, it's important to use header tags (h1, h2, h3, h4, h5 and h6) to designate titles and header text. Semantic HTML goes a long ways to help screen readers. However, picking a particular header level can be dangerous in a shared library. There can be several different levels of headers in context of an app, and we don’t know how components are going to be used in the wild. So it's important that consuming developers can chose the best level for them.

We came up with a small pattern to help this out. In a utilities package, we have:

To implement this pattern, developers need to wire it up in their component props:

And implement it in their base component

This let's the consumer pick which level of header they want, but enforces the pattern that it is a header.

UI vs. UX Design, an Amazon case study

I often hear a lot of product design professionals splitting hairs on the difference between UI and UX. The difference is subtle, and honestly shouldn’t matter to anyone not in the biz; a great product is a combination of the two. But here’s a simple story that illustrates the difference.

I need a new desk lamp. Something tall enough that reaches over my monitor and lights my face for all those Teams meetings. I hopped on Amazon and searched ‘stainless steel desk lamp.’ I got dozens of results. I scanned through the first few pages, opening up 3 new tabs for ones I thought looked fine. The thing that was most important to me was the height. But despite a consistently laid out detail page, it was near impossible to figure out if each lamp would reach above my monitor.

All the while, I was having to navigate through images that were poorly photoshopped and product descriptions written in cringey English.

I decided to change gears a little, and change my search term to “streaming key light.” Holy smokes, it was even worse. More products to sort through. More variables. Does this light plug into the wall or is it USB? Does it come with a stand?

I looked at the clock, and to my amazement I had spent 2 hours….looking at lamps.

Then I thought - ‘I wonder if Costco has something that might work?’ So I grabbed my keys and drove to Costco like a caveman. Yep, they had a nice lamp that was tall enough, looked nice enough and I trust Costco not to sell me something that might burn my house down. I was home in less than hour, got a few other essentials and a hot dog to boot.

So what did Amazon do wrong? Their design has been great and unchanged for years. Nicely laid out, uniform spacing, consistent and cohesive. I knew where to look for things like price and how long it’d take to get it. But it was simply so tedious to figure out the other things I needed to know about the lamps that I couldn’t pull the trigger on any of them. The total user experience ended up being awful.

The biggest issue is that they’ve let their partners run amuck with the content on the product detail pages. The broken English and poor photo quality totally undermined my confidence to make a buying decision. I’d never heard of any of the brand names. There were waaay too many options, all with 4.5 star reviews that I know aren’t genuine. Unless I’ve seen an in depth 3rd party review on another site for that exact model number or a friend or influencer has referred me to it, it’s become really annoying to evaluate the quality of anything on Amazon.

Costco on the other hand solved all those same problems. Because I could touch it and even bring home today for the same price as the ones I was looking at on Amazon. Costco’s built a reputation on only carrying quality products and my decision making is even easier because they only ever show me at most 3 options.

Good product design isn’t simply about making the thing look pretty (UI Design) - it’s the culmination of the total end user experience (UX Design).

A code monkey's guide to writing your first tech resume

Full disclosure: I am not a recruiter. I’m a developer. I’ve had my recruiter friends read this and they’ve told me it’s pretty decent advice.

Motivation Just like any app, TV or radio commercial, your audience has a very short attention span and they look at (literally) thousands of resumes a year. This is your first meaningful impression with a recruiter after the hand shake and a smile. Goal Numero Uno: In 20 seconds, convince the recruiter that your resume is worth another 3 minutes of attention. Step 2: convince the recruiter that you’re a Stand Out Candidate and worth a short interview, likely the on campus or phone variety. That’s it. Don’t think you’re going to get the job based on this single sheet of paper. Trying to do too much will cause you stumble over the first hurtle of what turns out to be a very long arduous process.

Put yourself in recruiter’s shoes. What are they looking for first? If they can’t find an element they’re looking for within 10 seconds, they toss it and grab the next resume from the stack. They’ve got 50 more to get through in the next 2 hours. It’s your job as Stand Out Candidate to anticipate their needs and make it delightfully easy to answer their questions.

My friend Jon summed it up nicely when I told him I was writing this.

“The resume is a tool for telling me about you. Your major tells me what you want to do (and whether I am the right person to be talking to). GPA tells me you can do what your boss (teacher) tells you to do. Skills tells me what part of the company I can put you in. Awards tells me someone else thinks you’re neat, and that you care about pursuing something more than mediocrity. Employment/Projects is the most critical thing - it doesn't tell me what you want to do, it tells me what you can and have done. ‘Projects’ is your opportunity to demonstrate your passion, if you aren't lucky enough to have your employment reflect that”

Remember to keep iterating. You’re not going to knock this out in a single sitting like your World Civ. 102 paper. This is a living document that gets updated every few months as your experience and goals change. You’ll be maintaining this for the rest of your professional career.

Guiding Principles

1. Elaborate with specifics.

2. Real estate and attention spans are precious commodities.

3. Be realistic about what actually adds value.

4. Avoid distractions like the plague.

5. Be strategically honest.

Your resume should have the following sections. Keep them in this order. Ya know, anticipating needs and such.

1. Contact info

2. Education

3. Skills

4. Experience

Contact Info

This section should probably go last because it’s the easiest. Layout wise, it goes first. Top of the page. Your name should be in big, bold letters. Don’t worry, the recruiter will forget it at least 4 times. Make it easy to find again. Email and phone number are minimum. Full street address is overkill and distracting, but city and state are obligatory. You might consider putting contact details smaller in font than they body font with a lighter color. Don’t make the recruiter hunt, but you want them focusing on that AFTER you’ve proven you’re a Stand Out Candidate.

LinkedIn: Yes, it’s worth the effort to maintain a profile and have a link on your resume in your contact section. However, there is an intentional strategy to it. It should have more detailed information than your resume. It’s a good place to accumulate recommendations from superiors and peers. Post in depth descriptions of your projects. Screenshots are gold. Be selective about who you ask to be in your network. This takes time to build out fully. You don’t want it to look stale or incomplete.

Education

This one is also pretty straight forward. Absolute must haves in this order: degree you’re pursuing, minors, school name, GPA, and expected graduation date. They want to know if they should put you in the intern bucket or full time bucket. Make sure this is accurate and fields are easy to pick out.

Include your GPA, regardless of what it is. Seriously. Yes, there are companies that have a minimum requirement. It’s usually the second thing those recruiters look for after your major. When it’s absent, they don’t hesitate to ask, and bam – game over. In honesty though, I’ve found that companies that use this narrow filtering mechanism aren’t so great to work for anyways.

More dangerously, you’ve just looked careless and/or deceitful to the companies that *don’t* have a minimum requirement. An absent GPA means less than 2.0. If that’s the case, you’ve got some serious soul searching to do before you consider finding a job in that field of study.

If your GPA is lower than you’d like it to be make sure other parts of your resume scream why you’re a Stand Out Candidate. Explain what you’re doing to improve. Don’t make excuses or place blame. I personally know people who got jobs at top firms with GPA’s in the 2’s because they had a long list of other things that made them awesome. If your in major GPA is higher than your overall, breaking that out might help (see Guiding Principle 3).

Other things that might be helpful things to include in your education section are scholarship awards, a few relevant classes or specific areas of study if you’ve begun to focus in your 300/400 level courses. Recruiters aren’t going to know that “Cpts 223” at your school is “Advanced data structures.” Spell it out for them. Please don’t list every single class or the individual marks you received (yes, I see this more often than you think).

If you’re a freshman or sophomore, it might be worthwhile to talk about your high school education that goes away by the time you’re an upper classman. This information block lives at the top of the page while you’re early in your career, but moves to the bottom once you’re career has blossomed with a ton of relevant working experience (usually the 5 year mark).

Skills

Take a breather. You’ve just passed the first real hurdle. The next one is slightly harder to think about, but way easier to write down. This section should read like a simple list, most relevant first.

“But Mason, I don’t know what my skills are.” Grab a cup of coffee and start brainstorming.

Technical ones are pretty easy; computer languages, industry specific software applications. Spell these out, don’t assume the recruiter will know your jargon or acronyms. Office, Windows and macOS aren’t skills, they come with a high school diploma. Linux probably is though. The only exception I can see is if you are a Rockstar with Excel. And I mean *Rockstar.* Like using it to model complex macro economic scenarios or something. In this case it should read like “Modeling Macro Economic Models in Microsoft Excel.”

Speak a foreign language? Make sure you’re fluent, and put it down in this section. Sleeping through 2 years of it in high school like I did doesn’t count for much, see GP 5.

Now for the trickier ones; soft interpersonal skills. Analytical thinking. Time management. Communication. Teamwork. Entrepreneurial spirit. These are easy to call out, and recruiters will expect you to back these up with concrete examples in your experience section, see GP 3.

Experience

Congratulations, you’ve just checked all the recruiter’s minimum requirements. Now it’s time to tell the them why you are a Stand Out Candidate. Put your helmet on and strap in.

You have a lot more flexibility in this section than you think. It can be titled many things: Work History, Leadership, Community Involvement, Projects, etc. This is where you get to answer the recruiter’s skeptical question “All right hot shot, what have you actually done that makes you a Stand Out Candidate?”

The information you want the recruiter focusing on most should be towards the top of this section. Categorize it accordingly and attempt some semblance of chronological order. Got some of nontechnical work experience working at McDonalds? Good! That’s a value add – shows reliability and initiative. But perhaps it belongs below your Projects if you’re going for a tech job.

For each experience, you should have your title, company, city, start/end month/year. Then list out what you actually did. Your regular duties are a decent start, but some (most) can be implied from the title. Be efficient with your words, make sure it flows naturally. To really get traction, think about these as impact driven statements. “I did x, and the positive impact was y.” I always try to make each of these fits on a single line. Bonus points if you can call out numbers and statistics, see GP 1.

Examples:

• Fully automated the process for adding organizations, decreasing on boarding costs by 82%.

• Generated and distributed marketing materials to grow the client base by 350 clients.

“But Mason, I’m only a freshman and I’ve always been too focused on getting the best GPA to find time for work!” That’s A-okay. This is where a Projects section comes into play. Start with ones that you’ve done on your own time. (relevant: https://xkcd.com/519/). What technologies did you use? What were you trying to learn about? What goal were you trying to accomplish? What was the outcome? Be proud of your work. Show passion. You’d be amazed at the difference a little bit of that magic dust will make.

Don’t have any personal projects? Talk about class projects. You don’t even have to tell the recruiter it was for class. They’d only pick up on it if yours was the 3rd console based battleship game (a classic!) they’ve seen today. But perhaps you generated an AI engine for it over thanksgiving break?

Have you participated in any clubs? What role did you take on? What initiatives did you take as a member?

Let’s take a moment to be brutally honest here. Getting straight A’s is not enough to land a job and probably not even an internship. Period. You NEED to distinguish yourself beyond that. If you’re already convinced someone to pay you to code, skip ahead to the next section but otherwise listen closely. Be Awesome. GEEK OUT. Show that you’re passionate about technology. The current state of the software industry means that the only barrier to entry is time (aka priorities). Do SOMETHING out side of class. Fiddle with a new library. Got a smart phone? Write an app so you can show the recruiter right there on the floor what you’re capable of. Publish it. Go to the hackathons. Burn the midnight oil.

This might (will) take some tough choices. Passing up a ski trip to stay in and code. Discontinuing your World of Warcraft account (or is it League of Legends these days?). Conquer your social anxiety to participate in tech clubs. I ended up delaying my graduation date so I could sink my teeth into a tech job on campus 15 hours a week.

The point is, you want to have a spectacular answer to that nagging question in the recruiter’s head.

“What makes this candidate awesome?”

Do’s and don’ts

Do spend some extra time picking out a font. Yes, this *is* important. Times New Roman is outdated, dense and hard to read. We’re not constricted by MLA format here. Chose something clean, crisp, modern and elegant. Companies invest millions of dollars designing fonts to ensure their stuff is easy read and accurately reflects their brand. You can afford the extra 40 minutes.

Don’t sound like a condescending computer person. This is an easy trap to fall into. Stay positive with all your statements. “Less Technical People” are users, customers, clients, or management leadership. Don’t talk about what a mess it was before you saved the day.

Don’t include an objective or references sections. These are not part of a tech resume anymore. They’ll ask for your references during the background check when you make it that far, see GP 1.

Do make sure your alignments are pixel perfect. Don’t over use indentation.

Don’t call into question your ability to work in the U.S.

Do read your statements, out loud, one after another. Listen for awkward sentences & repeated words.

Don’t organize with chrome. A lot of people add lines, tables and ascii art to try and add visual appeal. ARGH! Remember guiding principles 2 & 3!? Instead, use white space and group related information. Use font weight and size to designate the start of a new section. Does that really need a label?

Do print it out and mark it up with a red pen. Hand it to your mom and friends to do the same. Get feedback, especially if it’s constructive. Fight the urge to defend yourself. Chances are your friends are having the same hang ups that professional resume readers (recruiters) are.

Don’t start with the same template that was blasted out to your entire CS class. It’s *really* hard to completely strip the template and you’d be amazed at how similar resumes end up looking. Start from the ground up. You’ll be glad you did.

Do limit yourself to 1 page. If you have enough experience (10+ years) to fill two, you’re reading the wrong hand book. Fill the page evenly, add white space, balance with both left and right alignments.

Do make sure your resume looks fantastic in .docx, .pdf and .txt format.

Do make sure the entire resume reads from the 3rd person. You could debate this. Just be uniform.

Don’t add filler to bulk up your resume. This stuff is easy to spot. Recruiters don’t care about your hobbies. Unless you’re running a legitimate business, you’re distracting from things the recruiter actually cares about. Save it for pleasantries in the interview room.

Do apply online. Always.

Do be confident. Completing a STEM degree puts you in the top 5% of people in the world. Some of your peers will make getting a job look easy. You didn’t see is the sweat equity they put in. Some are genuinely gifted (certainly not me). Don’t let that discourage you. It’s a tall mountain to climb.

Work hard. Be passionate.

Why developers should be hopeful about Microsoft's GitHub purchase

A lot has been said about Microsoft’s recent acquisition of GitHub. From the business analyst’s suggesting Microsoft over paid, to the developers fearing the Empire converted Luke to the Dark Side. To be fair, Microsoft’s track record has given developers reason to be concerned. I on the other hand, think this in context with more recent moves is what will make Microsoft good stewards of our code. Yes, I know that sounds backwards, but hear me out.

First and foremost, let’s be clear about exactly what Microsoft purchased here. For non-techies, Git is the underlying software that the company GitHub manages as a service. Developers use it to store and share the source code that powers their apps. The service is free, but developers can pay for more bells and whistles if they chose. There are dozens of companies doing exactly what GitHub does, they just happen to be the biggest and most successful one doing it. Microsoft itself implemented Git internally long before the acquisition, trusting their crown jewel Windows on it. So it’s not about the tech. At $300 million in annual revenue, the $7.5 billion price tag still seems pretty exorbitant.

What Microsoft really bought here was the network of 28 million engineers that use GitHub to manage their source code. If you do the math, they paid close to $270 per developer. In perspective; Facebook’s mammoth purchase of WhatsApp equated to $32 per user. Pat yourself on the back developers; Microsoft values your attention 8 times more than everyone else’s. A single license to their Visual Studio Pro developer software is $500, or $2,500/yr if you want to step up to their enterprise level SKU. Considering how lucrative a developer could be (more precisely, their employers), this price tag is starting to make a little more sense.

And that’s the obvious play here; Microsoft will use engineer's attention spans while using GitHub to sell them more services. And those Azure services are a damn fine product; they’re the reason for Microsoft’s massive comeback.

“But still Mason, why should I trust them?”

It was in the Ballmer era that Microsoft lost their way with developers. Microsoft thought they could strong armed with their dominant platform into using their less than superior tools and services. A short sighted strategy, no doubt. But consider a few cultural shifts under Satya:

VS Code. Compared to its expensive big brother Visual Studio, VS Code is a stripped down, lightweight, open source, modular, free text editor available on multiple platforms. It’s edged out NotePadd++ as the preferred text editor by developers in just 3 years (and believe me, developers can be adverse to change). This epitomizes Microsoft’s successful pivot to a new generation of developers.

Microsoft has started favoring the best tool, regardless of who makes it, even when it competes with their own. MS Teams, parts of office and a bunch of other recent cross platform apps were written in JavaScript libraries, rather than Microsoft’s own Xamarin. This is to say that Microsoft uses tools based on their merit, not their political convenience. The importance of this shift cannot be understated and should be praised by developers.

Finally, they’ve stopped Microsofting their acquisitions. Yes, you read that right. To purchase a successful company, only to mismanage the goodness out of it. But they seem to have bucked the trend. Mojang and LinkedIn are all recent acquisitions that have stayed pure, and got better with Microsoft’s resources. They’ve learned to let a good thing be, and it’s working well for them.

No doubt, Microsoft finds itself the under dog when it comes to developer favor these days. And they know it. If you're buying a car, who would you rather buy it from? The salesman who's fat and happy from a bumper month, or the guy who's had a lean one and sweetens the deal with free washes and oil changes? As the customer, I'll take the latter.