Experience sharing on Web resume making

Transferred from: Heero.luo

In 2012 years, I have to update my old resume because I need to change my job interview. But in Word the layout is a variety of not comfortable, so played as the advantage of front-end engineers to make a resume page, in the end of 2014, want to change work and then revised it. This resume has been a good number of HR and headhunting praise, so specifically to share the production experience, but also for those who want to change the work of the peer reference.

Before you get to the point, consider the benefits of an HTML resume:

• No need to download, open directly.
• You can use a richer design and more flexible typography.
• Other resources can be accessed through hyperlinks.
• You can show your design and front-end skills in passing.

On this basis, I also set the following goals for this resume:

• Show everything in one page .
• Write once, run anywhere. Compatible with PC devices and mobile devices, it is also best to print directly.
• Simple and practical, it is best not even JS to write. Those with a variety of animation made out even to make a small game cool resume, in fact, is not conducive to reading.

Well, here's how to build a resume like this.

Design

Many programmers will shout: "I write code, do not understand the design." But as the saying goes: never eaten pork, always seen a pig run. Usually stroll so many sites, don't have a few particularly pleasing to the eye? Now the browser development tools are very advanced, which is the right to pick up the "reference" on the line. Like a resume this simple page does not need to do PSD manuscript, after the idea of writing HTML and CSS directly more convenient.

Design should try to use graphics, image expression content , this is because compared to large paragraphs of text, people prefer to see the picture. Here also posted in my resume in one of the revision before and after the contrast (left and right new):

Compared to the large section on the left, the bar chart on the right allows you to see the skill level at one glance.

Font size

These days the display is getting bigger, the relative text is getting smaller, and now most websites are setting the standard text size to 14px. Given the low content of the CV and the ease of layout, it is recommended to set the standard text size to 16px, which does not look so strenuous on mobile devices with smaller screen sizes.

About compatibility

Who is the audience for your CV? There are two types of people:HR and technical engineer . To be sure, technical engineers are basically using Chrome or Firefox as a good comrade and despise ie very much. HR perennial, will gradually change to new browser. However, taking into account the small amount of HR and the experience of a very small number of technical engineers, it is a "warm" hint to be prepared:

The implementation method is very simple, through the conditional comment on the browser version of IE 9.0, directly with the IFRAME set a hint page to block the original page:

<!--[if lt IE 9]><script>!function(body) {body.style.width = body.style.height = ‘100%‘;body.parentNode.style.overflow = body.style.overflow = ‘hidden‘;}(document.body);</script><iframe src="4oie.html" frameborder="0" scrolling="no" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 99999;"></iframe><![endif]—>

Why even IE8 to abandon it? This is because it does not support media query and some CSS 3 styles, and this is exactly the technology that is required for the multi-device adaptation that is mentioned later.

Encrypted contact information

This step is mainly to avoid a variety of harassment calls, spam scanning software scanning, the encryption here is not required to do a complex, as long as a little bit of interference. For example, your QQ number is 1234567, then on the page can be output:

<p>QQ：<script>document.write( ‘a1b2c3d4e5f6g7h‘.replace(/\D/g, ‘‘) );</script></p>

As for the e-mail address, you can do this (using [email protected] as an example):

<p>Email: <script>document.write( [‘com‘, ‘126‘, ‘abc‘].reverse().join(‘.‘).replace(‘.‘, ‘@‘) );</script></p>

Phone number is more sensitive information, can make complex point, here I use the base64 scheme. Perhaps a lot of friends do not know, slightly advanced point of the browser has been natively support base64 encoding and decoding, respectively, call Window.btoa and Window.atob two functions. So the phone number can be output like this (take 13800138000 for example):

<p>Phone number: <script>if (window.atob) { document.write( window.atob(‘MTM4MDAxMzgwMDA=‘) ); }</script></p>

Furthermore, I don't want anyone to see my phone number, so I can add a few restrictions. For example, a URL with a parameter to display the phone number:

<PId= "Phone-number" style= "display: none; " >phone Number: <script>if (window.atob) {document.write ( Span class= "hljs-built_in" >window.atob ( ' mtm4mdaxmzgwmda= ')); }if (/[?&]show-phone-number (&|$)/.test (window.location.search)) {document.getelementbyid ( Phone-number '). style.display = ";} </script></ P>              

Suitable for PC and mobile devices

First, use Media query to have different layouts at different widths.

Second, there is a growing number of devices on the Retina screen (such as most ipads, some MacBook, most phones) on the market, and non-vector content such as images can be distorted on these screens because they are pulled large. Therefore, in the preparation of the content of the picture, it is best to make the actual display size of twice times , and then through the CSS zoom out. And for the decorative small icon, you can use twice times the size of the picture (through Background-size), you can also use the font icon . Here I do not recommend SVG, because its performance is poor, on the mobile device open will obviously card a bit.

Finally, do not forget to post a QR code to facilitate the mobile device scan code access.

With this step, you can go to the interview with your ipad.

Print

In fact, the printer is also a device, supposedly this part of the content should be kept together with the previous section, but the situation of printing equipment is more special, and there are many pits, so separate as a section.

Where is the printing device special? A4 paper size is 21cm wide, 29.7cm high, but I use Chrome to save the page as a PDF (in the print interface can be saved), see the resolution is wide 595px, high 842px. What the hell is this? After a study, it was found that itwas converted according to the Pixels per inch, which is the number of pixels in an inch:

1in = 2.54cm

21cm/2.54cm * 72px≈595px

According to the rules of media query, this width is obviously entered into the layout of the mobile device when printing. The size of the 16px-size text after it is printed is:

2.54cm * 16px/72px≈0.56cm

The text is obviously too big to be shrunk:

@media print {    body { font-size: 12px; }}

But this shrinks, the content is relatively small, and then the original small width of the layout is not appropriate, but the layout of the large width is better, so there is such a code:

@media not print and (max-width: 639px) {    /* ... */}

Then the pit came, and the media query here didn't say "not a print device and not more than 639px", but "not a print device with a width not exceeding 639px." (see Mozilla's explanatory notes on this point)

This little problem is hard for us to change the code to nested media query:

@media not print {    @media (max-width: 639px) { /* ... */ }}

I thought the problem had been solved, but I found the style exception after sweep. The original mobile phone QQ browser Kernel also does not support nested media query, incidentally, IE series all browsers also do not support this feature.

was tossing to no way, and finally obediently wrote two CSS:

<link href="css/style.css" media="not print" rel="stylesheet" type="text/css" /><link href="css/style-for-print.css" media="print" rel="stylesheet" type="text/css" />

Next, look at how the printed style should be written. The first is @page , can be used to modify the layout of the page container, the most commonly used is the size of the specified page and margins:

@page {    size: A4 portrait; margin: 2.1cm 1.9cm;}

Second, some browsers do not print the background color and background image by default, so the background small icon is gone. For Chrome, you can add this CSS code to force the print background:

body { -webkit-print-color-adjust: exact; }

Again, to process the link. To know that after printing, with your finger to the paper stamp is not open page. So text links such as "online address", "personal blog" are either hidden, or the link address is printed out. To display the link address, you can write this:

a:after { content: ‘[‘ attr(href) ‘]‘; }

In addition, the length of the paper resume should not be too long, can selectively hide some of the content. For example, black and white printed resume can ignore the picture:

Finally, we have to remember a premise, these are not compatible with IE 6, ie 7, ie 8, but behind the print shop may be used or XP system, so the output of a PDF to print is more insurance.

After the resume is done

Start with a variety of browsers to see if there is no way out, but more importantly: Please read your resume at least 10 times . The programmer's ability to express is generally not strong, and in this process you can find:

• Various typos. For example, "login" as the "landing".
• Various error terms. For example, "jquery" is written in "jquery", "ios" as "ios".
• The various statements do not pass.
• Various expressions are cumbersome.

As for the server where the resume is placed, you can use Github pagesor spend ￥ more than 100 per year to rent a virtual host .

After a successful change of job

When you complete a worthwhile project in your new company, please update your CV. Why? Because at this point you have the most memory of the project, if you want to wait until the time to change the resume, often forget the project in many details.

At last

Attached to my new version of the resume (picture big, mobile network carefully open; Please allow me to mosaic sensitive content).

Source: Point Me

Experience sharing on Web resume making