Create a dynamic resume using native JS (ADHD CV) and online preview deployment process __js

This article is updated in sync with my Hexo blog:
My Hexo blog This project fork address (Welcome to star):

Https://github.com/ZQ-jhon/resume This item preview addresses (Preview address)

Preview: The cause of the ADHD CV Project

Because you see a dynamic resume of a great God on the Internet, as shown in the connection:

http://strml.net/

It's not flashy. Cool and not cool. In fact, this project is actually very simple, the entire code, JS API is not more than 10. referenced third-party libraries

1.jQuery the actual use of the place is only 1%

2.prism code Gao Lianku. Used to 30%

3.marked.js markdown syntax to HTML library, practical use of 20% Technology Overview

The technology used throughout is not very difficult, mainly:

Core principle: at the same time to a style tag and the pre label Spit Code, the pre shows the source, and style can be directly into styles.

String extraction, stitching.

The SetInterval timer controls the throughput tempo/rate of the entire code.

Set some if in setinterval to control the throughput position of the total string. Guide to avoiding the pit

1. Note String stitching: to pay attention to string stitching, to Styletag inside the code, once contains comments//, to/to escape, as follows ' \/here fill your content \/. **

2. The name of the string must be reasonable: as shown in the figure:

3. Code highlighting: In the middle of adding code highlighting, through the decision string loop n + + to achieve how much, so use if (n>123&&n<321) This method for region rendering. The rendering code for Prism is as follows:

Official JS library address: [http://prismjs.com/] (http://prismjs.com/)

syntax: Prism.heihlight (rendered string, rendered code format)

Prism.highlight ( Str.substring (0,n), Prism.languages.css);

4.markdown⇒html Rendering: The same as the value of N, to use if () to loop.

Marked.js Official library Address: https://www.npmjs.com/package/marked

The rendering code is as follows:

Drawboard.innerhtml =marked (str.substring (929,1885));

5. Dynamically Create Pre tags (id= "drawboard"): CSS code version is initially written in HTML, but after the resume board (id= "Drawboard", essentially a pre tag) is determined by the value of N, to create dynamically, as shown in the figure:

6. Elements that have been created cannot be retrieved in another loop:
in the "5" just now, the dynamically created pre tag (id= "Drawboard") will not document.getElementById (' Drawboard ') within the region of the if (), and it needs to be fetched and assigned again in the IF. As shown in the figure:

7. Dynamic Drop-down also through the value of n to let the element overflow automatically Drop-down

As shown in figure:

8. Dynamic Resume the last Magic Link: or through the value of N to judge, thus rendering

In fact, this link is mysterious, by judging the CSS Code board end of the last string of n value, to render.

Code as shown:

Core Principle Code

Note, to the style tag inside the string, pay attention to the/**/annotation tag to escape the

var Styletag = document.getElementById (' Styletag ');

var sourceboard = document.getElementById (' Sourceboard ');

var str = ' \/* everyone good ... Today I will give you an online resume ... \/* ';


var n = 0;
Window.setinterval (function () {
   n++;
   styletag.innerhtml = str.substring (0,n);

   sourceboard.innerhtml = str.substring (0,n);


},100);

At this point, the user watched the string appear at the same time, the program has been to the style tag spit code, so that when the user read a CSS style end, the corresponding style can be immediately rendered through the browser.

Demo deployment to GitHub detailed process

Originally did not know that demo can be directly on the GitHub preview ... Until this feature is discovered:

In the demo warehouse, click the settings, and then find GitHub Pages, set the source for Master branch (this project has only one branch, so there is no choice), click Save, you can see the preview address, the general save will be slightly delayed.

The whole deployment process is as follows:

In the local project root directory, $ git init

Add all current files to registers $ git Add. (There is a "·" At the back, representing all the files)

Connect remote warehouse $ git Remote add origin "your repository address"

Submit all files to git version control system $ git commit-m "Create Demo Resume"

Push to your remote warehouse $ Git push origin master

Open the browser, enter the directory of the Respository, click the settings, set GitHub pages for master, wait a moment, you can preview.

PS: Learn this SAO operation, I used to do a lot of demos have been deployed once, now can be previewed, thanks to GitHub reflection and deficiencies

In Quick Preview mode, for example, the SetInterval interval is set to 0, the entire page ran out, easy to appear two code version of the Drop-down scroll "suspended animation", pull not move, but the interval is set to normal 90ms or 100ms, the entire page ran without any problems. The reason for my initial summary is that because each drop is 1000, the pull is likely to repeat hundreds of times, thousands of times. So when the interval is very small, the number of repetitions is very high, the Drop-down value is very large, then the more likely the phenomenon.

When I asked some front-end predecessors about the shortcomings of this demo, the Great God told me: the interviewer only cares about the information on the page, not how to present it, and can not endure up to 200s of waiting. This demo is a dazzling technology, but there is no core technical points, but also as honest to write a clean and refreshing resume really.

My reflection is that this demo because of a large number of strings and escape character stitching, so there is no like the original author: http://strml.net/page, rendering the beautiful, this is the beginning of the demo I did not consider the overall results, resulting in now if you add some CSS code, Will bring a lot of work.

The entire page does not accelerate or suspend the function, in fact this is simple, set three buttons: slow, medium speed, fast, in the setinterval in the If, the click event to monitor, once clicked, modify the SetInterval time interval, and then return the current n value.

The entire demo code is too confusing to encapsulate, because it is now on the object-oriented or some rusty, hope that the future encapsulation, in order to improve operational efficiency, and reuse.